feat: add order item skeleton to the profile page

pooriaset · Dec 4, 2024 · d0d38fd · d0d38fd
1 parent 1a68842
commit d0d38fd
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 9 deletions.
diff --git a/src/app/[locale]/(main)/profile/components/OrderItemSkeleton.tsx b/src/app/[locale]/(main)/profile/components/OrderItemSkeleton.tsx
@@ -0,0 +1,41 @@
+import DotIcon from '@/components/Icons/components/Use/DotIcon';
+import { Skeleton, Stack, useTheme } from '@mui/material';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import { FC } from 'react';
+
+const OrderItemSkeleton: FC = () => {
+  const theme = useTheme();
+  return (
+    <Card variant="outlined">
+      <CardContent>
+        <Stack spacing={1}>
+          <Stack
+            justifyContent="space-between"
+            direction="row"
+            alignItems="end"
+          >
+            <Stack alignItems="end" direction="row" spacing={0.5}>
+              <Skeleton variant="circular" width={24} />
+              <Skeleton variant="text" width={150} />
+            </Stack>
+
+            <Skeleton variant="circular" width={24} />
+          </Stack>
+          <Stack spacing={1} direction="row" alignItems="center">
+            <Skeleton variant="text" width={50} />
+            <Skeleton variant="text" width={50} />
+            <DotIcon color={theme.palette.divider} />
+            <Skeleton variant="text" width={50} />
+            <Skeleton variant="text" width={50} />
+            <DotIcon color={theme.palette.divider} />
+            <Skeleton variant="text" width={50} />
+            <Skeleton variant="text" width={50} />
+          </Stack>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default OrderItemSkeleton;
diff --git a/src/app/[locale]/(main)/profile/page.tsx b/src/app/[locale]/(main)/profile/page.tsx
@@ -6,16 +6,20 @@ import { useQuery } from '@apollo/client';
 import { Card, CardContent, CardHeader, Stack } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import OrderItem from './components/OrderItem';
+import OrderItemSkeleton from './components/OrderItemSkeleton';
 
 const Page = () => {
   const t = useTranslations();
 
-  const { data } = useQuery<GetCustomerOrdersQuery>(GET_CUSTOMER_ORDERS, {
-    variables: {
-      count: 3,
-      statuses: [],
+  const { data, loading, error } = useQuery<GetCustomerOrdersQuery>(
+    GET_CUSTOMER_ORDERS,
+    {
+      variables: {
+        count: 3,
+        statuses: [],
+      },
     },
-  });
+  );
 
   return (
     <Stack spacing={2}>
@@ -27,10 +31,16 @@ const Page = () => {
           title={t('profile.latestOrders')}
         />
         <CardContent>
-          {data?.customer?.orders?.edges?.map((edge) => {
-            const order = edge.node!;
-            return <OrderItem key={order.id} {...order} />;
-          })}
+          {loading || !!error ? (
+            <OrderItemSkeleton />
+          ) : (
+            <>
+              {data?.customer?.orders?.edges?.map((edge) => {
+                const order = edge.node!;
+                return <OrderItem key={order.id} {...order} />;
+              })}
+            </>
+          )}
         </CardContent>
       </Card>
     </Stack>

diff --git a/src/components/CustomSkeleton/CustomSkeleton.tsx b/src/components/CustomSkeleton/CustomSkeleton.tsx
@@ -0,0 +1,13 @@
+import { Skeleton, SkeletonProps } from '@mui/material';
+import { FC } from 'react';
+
+export interface CustomSkeletonProps extends SkeletonProps {
+  isLoading?: boolean;
+}
+const CustomSkeleton: FC<CustomSkeletonProps> = ({ isLoading, ...props }) => {
+  if (!isLoading) {
+  }
+  return <Skeleton variant="rectangular" width="100%" {...props} />;
+};
+
+export default CustomSkeleton;