feat: show skeleton on loading on home page (#694)

* feat: show skeleton on loading on home page * refactor: apply PR requested changes
graasp · Sep 25, 2024 · 87ec65a · 87ec65a
1 parent 1de0f4d
commit 87ec65a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 7 deletions.
diff --git a/src/components/collection/CollectionsGrid.tsx b/src/components/collection/CollectionsGrid.tsx
@@ -20,6 +20,8 @@ type Props = {
   showIsContentTag?: boolean;
 };
 
+const height = 300;
+
 const CollectionsGrid = ({
   collections,
   isLoading,
@@ -30,7 +32,21 @@ const CollectionsGrid = ({
   const { t } = useLibraryTranslation();
 
   if (isLoading) {
-    return <Skeleton />;
+    return (
+      <Grid
+        container
+        spacing={4}
+        alignItems="stretch"
+        justifyContent="flex-start"
+        id={id}
+      >
+        {Array.from({ length: 4 }).map(() => (
+          <Grid xs={6} sm={4} md={3} lg={3} xl={2}>
+            <Skeleton height={height} sx={{ transform: 'unset' }} />
+          </Grid>
+        ))}
+      </Grid>
+    );
   }
 
   return (

diff --git a/src/components/collection/ItemCollection.tsx b/src/components/collection/ItemCollection.tsx
@@ -14,6 +14,7 @@ type ItemCollectionProps = {
   title: string;
   collections?: DiscriminatedItem[];
   sx?: SxProps<Theme>;
+  isLoading?: boolean;
 };
 
 const ItemCollection = ({
@@ -22,6 +23,7 @@ const ItemCollection = ({
   title,
   collections,
   sx,
+  isLoading = false,
 }: ItemCollectionProps) => {
   return (
     <StyledContainer sx={sx} id={id}>
@@ -34,7 +36,7 @@ const ItemCollection = ({
       <CollectionsGrid
         collections={collections}
         id={collectionGridId}
-        isLoading={false}
+        isLoading={isLoading}
       />
     </StyledContainer>
   );

diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
@@ -26,32 +26,39 @@ const Home = () => {
 
   const { hooks } = useContext(QueryClientContext);
 
-  const { data: graasperCollections } =
+  const { data: graasperCollections, isLoading: isGraasperCollectionsLoading } =
     hooks.usePublishedItemsForMember(GRAASPER_ID);
-  const { data: mostLikedCollections } = hooks.useMostLikedPublishedItems({
-    limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW,
-  });
-  const { data: recentCollections } = hooks.useMostRecentPublishedItems({
+  const {
+    data: mostLikedCollections,
+    isLoading: isMostLikedCollectionsLoading,
+  } = hooks.useMostLikedPublishedItems({
     limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW,
   });
+  const { data: recentCollections, isLoading: isMostRecentLoading } =
+    hooks.useMostRecentPublishedItems({
+      limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW,
+    });
 
   return (
     <MainWrapper>
       <StyledBackgroundContainer>
         <HomeHeader />
 
         <ItemCollection
+          isLoading={isGraasperCollectionsLoading}
           id={GRAASP_SELECTION_TITLE_ID}
           collectionGridId={GRAASPER_COLLECTIONS_GRID_ID}
           collections={graasperCollections}
           title={t(LIBRARY.HOME_GRAASPER_COLLECTIONS_TITLE)}
         />
         <ItemCollection
+          isLoading={isMostLikedCollectionsLoading}
           id={MOST_LIKED_TITLE_ID}
           collections={mostLikedCollections}
           title={t(LIBRARY.HOME_MOST_LIKED_COLLECTIONS_TITLE)}
         />
         <ItemCollection
+          isLoading={isMostRecentLoading}
           id={RECENT_PUBLICATIONS_TITLE_ID}
           collections={recentCollections}
           title={t(LIBRARY.HOME_RECENT_COLLECTIONS_TITLE)}