From a3a9f35005dc1de84255fff42c04a1b543e74c7b Mon Sep 17 00:00:00 2001
From: Philip Okugbe <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 13 Apr 2026 23:54:03 +0100
Subject: [PATCH] fix home flickers (#2108)

---
 .../layouts/global/global-sidebar.tsx         |  4 +--
 .../space/components/space-carousel.tsx       | 32 +++++++++++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/components/layouts/global/global-sidebar.tsx b/apps/client/src/components/layouts/global/global-sidebar.tsx
index 4d86a264..a46974ae 100644
--- a/apps/client/src/components/layouts/global/global-sidebar.tsx
+++ b/apps/client/src/components/layouts/global/global-sidebar.tsx
@@ -33,7 +33,7 @@ export default function GlobalSidebar() {
   const [active, setActive] = useState(location.pathname);
   const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
   const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
-  const { data: favoriteSpacesData } = useFavoritesQuery("space");
+  const { data: favoriteSpacesData, isPending: isFavoritesPending } = useFavoritesQuery("space");
   const favoriteSpaces = favoriteSpacesData?.pages.flatMap((p) => p.items) ?? [];
   const sortedFavoriteSpaces = [...favoriteSpaces]
     .filter((fav) => fav.space)
@@ -75,7 +75,7 @@ export default function GlobalSidebar() {
         <Divider my="xs" />
         <div className={classes.section}>
           <Text className={classes.sectionHeader}>{t("Favorite spaces")}</Text>
-          {sortedFavoriteSpaces.length === 0 ? (
+          {!isFavoritesPending && sortedFavoriteSpaces.length === 0 ? (
             <Text size="xs" c="dimmed" pl="xs" py={4}>
               {t("Favorite spaces appear here")}
             </Text>
diff --git a/apps/client/src/features/space/components/space-carousel.tsx b/apps/client/src/features/space/components/space-carousel.tsx
index e8c4eada..169d34b1 100644
--- a/apps/client/src/features/space/components/space-carousel.tsx
+++ b/apps/client/src/features/space/components/space-carousel.tsx
@@ -1,4 +1,4 @@
-import { Text, Card, rem, Group, Button } from "@mantine/core";
+import { Text, Card, rem, Group, Button, Skeleton } from "@mantine/core";
 import {
   prefetchSpace,
   useGetSpacesQuery,
@@ -13,9 +13,37 @@ import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
 import CardCarousel from "@/components/ui/card-carousel";
 
+function SpaceCardSkeleton() {
+  return (
+    <Card p="xs" radius="md" withBorder className={classes.card}>
+      <Card.Section className={classes.cardSection} h={40} />
+      <Skeleton circle height={38} width={38} mt={rem(-20)} />
+      <Skeleton height={14} mt="xs" width="70%" radius="xl" />
+      <Skeleton height={10} mt="md" width="40%" radius="xl" />
+    </Card>
+  );
+}
+
 export default function SpaceCarousel() {
   const { t } = useTranslation();
-  const { data } = useGetSpacesQuery({ limit: 20 });
+  const { data, isPending } = useGetSpacesQuery({ limit: 20 });
+
+  if (isPending) {
+    return (
+      <>
+        <Group justify="space-between" align="center" mb="md">
+          <Text fz="sm" fw={500}>
+            {t("Spaces you belong to")}
+          </Text>
+        </Group>
+        <CardCarousel ariaLabel={t("Spaces you belong to")}>
+          {Array.from({ length: 4 }, (_, i) => (
+            <SpaceCardSkeleton key={i} />
+          ))}
+        </CardCarousel>
+      </>
+    );
+  }
 
   const cards = data?.items.map((space) => (
     <Card