feat: show skeleton group card when loading (#80)

daodaoedu · Oct 1, 2024 · 3fa56ea · 3fa56ea
1 parent c0ac5b6
commit 3fa56ea
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 1 deletion.
diff --git a/components/Group/GroupList/SkeletonGroupCard.jsx b/components/Group/GroupList/SkeletonGroupCard.jsx
@@ -0,0 +1,71 @@
+import { Skeleton } from '@mui/material';
+import {
+  StyledContainer,
+  StyledFooter,
+  StyledGroupCard,
+  StyledInfo,
+  StyledText,
+} from './GroupCard.styled';
+
+function SkeletonGroupCard({ _id }) {
+  return (
+    <StyledGroupCard href={`/group/detail?id=${_id}`}>
+      <Skeleton variant="rounded" width="100%" height={122} animation="wave" />
+      <StyledContainer>
+        <Skeleton
+          variant="text"
+          width="100%"
+          fontSize="14px"
+          animation="wave"
+        />
+        <StyledInfo>
+          <StyledText>
+            <Skeleton
+              variant="text"
+              width="60%"
+              fontSize="64px"
+              animation="wave"
+            />
+          </StyledText>
+          <StyledText>
+            <Skeleton
+              variant="text"
+              width="52.8%"
+              fontSize="12px"
+              animation="wave"
+            />
+          </StyledText>
+        </StyledInfo>
+        <StyledText lineClamp="2" fontSize="14px" style={{ minHeight: '28px' }}>
+          <Skeleton
+            variant="text"
+            fontSize="12px"
+            width="100%"
+            animation="wave"
+          />
+          <Skeleton
+            variant="text"
+            fontSize="12px"
+            width="100%"
+            animation="wave"
+          />
+        </StyledText>
+        <StyledFooter>
+          <Skeleton
+            sx={{
+              height: '32px',
+              width: '52.8%',
+              marginLeft: 'auto',
+            }}
+            variant="text"
+            fontSize="12px"
+            width="27.2%"
+            animation="wave"
+          />
+        </StyledFooter>
+      </StyledContainer>
+    </StyledGroupCard>
+  );
+}
+
+export default SkeletonGroupCard;
diff --git a/components/Group/GroupList/index.jsx b/components/Group/GroupList/index.jsx
@@ -6,6 +6,7 @@ import { Box } from '@mui/material';
 import useSearchParamsManager from '@/hooks/useSearchParamsManager';
 import { setQuery } from '@/redux/actions/group';
 import GroupCard from './GroupCard';
+import SkeletonGroupCard from './SkeletonGroupCard';
 
 export const StyledGroupItem = styled.li`
   position: relative;
@@ -56,7 +57,25 @@ function GroupList() {
   return (
     <>
       <StyledGroupList>
-        {items?.length || isLoading ? (
+        {isLoading ? (
+          // always show 3 || 6 skeleton cards in mobile || desktop screen
+          Array.from({ length: isMobileScreen ? 3 : 6 }, (_, index) => {
+            const isLast = index === (isMobileScreen ? 2 : 5);
+            const shouldRenderDivider =
+              (isMobileScreen && !isLast) ||
+              (isPadScreen && !isLast && index % 2 === 1) ||
+              (isDeskTopScreen && !isLast && index % 3 === 2);
+
+            return (
+              <Fragment key={index}>
+                <StyledGroupItem>
+                  <SkeletonGroupCard />
+                </StyledGroupItem>
+                {shouldRenderDivider && <StyledDivider />}
+              </Fragment>
+            );
+          })
+        ) : items?.length ? (
           items.map((data, index) => {
             const isLast = index === items.length - 1;
             const shouldRenderDivider =