From 3fa56ea7a17a2a908212f636baf4f48c0d213eaf Mon Sep 17 00:00:00 2001
From: ruby10127130 <52684045+ruby10127130@users.noreply.github.com>
Date: Tue, 1 Oct 2024 23:29:10 +0800
Subject: [PATCH] feat: show skeleton group card when loading (#80)

---
 .../Group/GroupList/SkeletonGroupCard.jsx     | 71 +++++++++++++++++++
 components/Group/GroupList/index.jsx          | 21 +++++-
 2 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 components/Group/GroupList/SkeletonGroupCard.jsx

diff --git a/components/Group/GroupList/SkeletonGroupCard.jsx b/components/Group/GroupList/SkeletonGroupCard.jsx
new file mode 100644
index 00000000..11002463
--- /dev/null
+++ 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
index 5d7e3931..3aa27d00 100644
--- 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 =