fix: profile, orders page skeleton

src/pages/orders-details/components/orders-card-skeleton/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styles from './orderDetailsSkeleton.module.scss';
+
+export default function OrderDetailsSkeleton() {
+    return (
+        <div className={styles.skeletonHolder}>
+            <div className={styles.skeletonPurchaseCards}>
+                <div className={styles.skeletonHeader}>
+                    <div className={styles.skeletonTitle}></div>
+                    <div className={styles.skeletonButton}></div>
+                </div>
+
+                <div className={styles.skeletonAddress}></div>
+
+                <div className={styles.skeletonScroll}>
+                    {Array(3).fill(0).map((_, index) => (
+                        <div key={index} className={styles.skeletonOrderSubCard}></div>
+                    ))}
+                </div>
+            </div>
+
+            <div className={styles.skeletonOrdersResume}>
+                {Array(4).fill(0).map((_, index) => (
+                    <div key={index} className={styles.skeletonResumeRow}></div>
+                ))}
+
+                <div className={styles.skeletonCheckoutButton}></div>
+            </div>
+        </div>
+    );
+}

src/pages/orders-details/components/orders-card-skeleton/orderDetailsSkeleton.module.scss

@@ -0,0 +1,102 @@
+.skeletonHolder {
+    display: flex;
+    justify-content: space-between;
+    padding: 2%;
+    gap: 20px;
+    width: 100%;
+    min-height: 650px;
+    background-color: #f6f6f6;
+}
+
+.skeletonPurchaseCards {
+    width: 65%;
+    background-color: #fff;
+    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.2);
+    border-radius: 7px;
+    padding: 20px;
+}
+
+.skeletonHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.skeletonTitle {
+    width: 40%;
+    height: 20px;
+    background-color: #e0e0e0;
+    border-radius: 5px;
+}
+
+.skeletonButton {
+    width: 25%;
+    height: 30px;
+    background-color: #e0e0e0;
+    border-radius: 5px;
+}
+
+.skeletonAddress {
+    height: 20px;
+    width: 70%;
+    background-color: #e0e0e0;
+    border-radius: 5px;
+    margin-bottom: 20px;
+}
+
+.skeletonScroll {
+    height: 400px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.skeletonOrderSubCard {
+    width: 100%;
+    height: 80px;
+    background-color: #e0e0e0;
+    border-radius: 5px;
+}
+
+.skeletonOrdersResume {
+    width: 30%;
+    background-color: #fff;
+    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.2);
+    border-radius: 7px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.skeletonResumeRow {
+    width: 100%;
+    height: 20px;
+    background-color: #e0e0e0;
+    border-radius: 5px;
+}
+
+.skeletonCheckoutButton {
+    width: 100%;
+    height: 40px;
+    background-color: #e0e0e0;
+    border-radius: 7px;
+    margin-top: 20px;
+}
+
+@media (max-width: 768px) {
+    .skeletonHolder {
+        flex-direction: column;
+        gap: 20px;
+    }
+
+    .skeletonPurchaseCards {
+        width: 100%;
+    }
+
+    .skeletonOrdersResume {
+        width: 100%;
+    }
+}

src/pages/orders-details/controller/order-details.controller.tsx

@@ -3,8 +3,8 @@ import { useRouter } from 'next/router';
 import { HomePageDefault } from '@/components/home-page-default';
 import OrderDetails from '../view';
 import { useOrdersDetailsInfo } from '@/hooks/use-order-details-info';
-import OrdersCardSkeleton from '../../orders/components/orders-card-skeleton';
 import { useEffect } from 'react';
+import OrderDetailsSkeleton from '../components/orders-card-skeleton';
 
 export default function OrderDetailsController() {
     const router = useRouter();
@@ -21,7 +21,7 @@ export default function OrderDetailsController() {
     return (
         <HomePageDefault>
             {isLoading ? (
-                <OrdersCardSkeleton />
+                <OrderDetailsSkeleton />
             ) : (
                 <OrderDetails order={order} isLoading={isLoading} />
             )}

src/pages/orders-details/view/index.tsx

@@ -3,11 +3,11 @@ import { useRouter } from 'next/router';
 import { AiOutlineArrowLeft } from 'react-icons/ai';
 import styles from './orders-details.module.scss';
 import { OrderItem } from '@/contexts/orders/types';
-import OrdersCardSkeleton from '../../orders/components/orders-card-skeleton';
 import OrderSubCard from '../components/order-subtile-card';
 import OrdersResume from '../components/order-resume';
 import { useTranslation } from 'react-i18next';
 import getDeviceType from '@/utils/get-device-type';
+import OrderDetailsSkeleton from '../components/orders-card-skeleton';
 
 interface OrderDetailsProps {
     order: OrderItem;
@@ -41,7 +41,7 @@ export default function OrderDetails({ order, isLoading }: OrderDetailsProps) {
     };
 
     if (isLoading) {
-        return <OrdersCardSkeleton />;
+        return <OrderDetailsSkeleton />;
     }
 
     return (

src/pages/orders/components/orders-card-skeleton/index.tsx

@@ -1,17 +1,24 @@
-import { Card, CardContent, CardMedia, Skeleton } from '@mui/material'
-import React from 'react'
+import React from 'react';
+import styles from './ordersCardSkeleton.module.scss';
 
 export default function OrdersCardSkeleton() {
-  return (
-    <Card>
-      <CardMedia component={Skeleton} variant="rectangular" height={200} />
-      <CardContent style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}>
-        <Skeleton width={100} height={30} animation="pulse" />
-        <Skeleton width={100} height={30} animation="pulse" />
-      </CardContent>
-    </Card>
-  )
+    return (
+        <div className={styles.skeletonHolder}>
+            <div className={styles.skeletonTitle}></div>
+            <div className={styles.skeletonList}>
+                {Array(5)
+                    .fill(0)
+                    .map((_, index) => (
+                        <div className={styles.skeletonCard} key={index}>
+                            <div className={styles.skeletonImage}></div>
+                            <div className={styles.skeletonContent}>
+                                <div className={styles.skeletonText}></div>
+                                <div className={styles.skeletonText}></div>
+                                <div className={styles.skeletonButton}></div>
+                            </div>
+                        </div>
+                    ))}
+            </div>
+        </div>
+    );
 }

src/pages/orders/components/orders-card-skeleton/ordersCardSkeleton.module.scss

@@ -0,0 +1,84 @@
+.skeletonHolder {
+    width: 100%;
+    min-height: 390px;
+    background-color: #f6f6f6;
+    display: flex;
+    flex-direction: column;
+    margin: 2% auto;
+    padding: 20px;
+    border-radius: 7px;
+}
+
+.skeletonTitle {
+    width: 50%;
+    height: 24px;
+    background-color: #e0e0e0;
+    margin-bottom: 20px;
+    border-radius: 4px;
+}
+
+.skeletonList {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.skeletonCard {
+    height: 150px;
+    display: flex;
+    gap: 15px;
+    padding: 15px;
+    background-color: #ffffff;
+    border-radius: 7px;
+    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.skeletonImage {
+    width: 80px;
+    height: 80px;
+    background-color: #e0e0e0;
+    border-radius: 4px;
+    flex-shrink: 0;
+}
+
+.skeletonContent {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: 10px;
+}
+
+.skeletonText {
+    width: 80%;
+    height: 16px;
+    background-color: #e0e0e0;
+    border-radius: 4px;
+}
+
+.skeletonText:nth-child(2) {
+    width: 60%;
+}
+
+.skeletonButton {
+    width: 100px;
+    height: 30px;
+    background-color: #e0e0e0;
+    border-radius: 4px;
+    margin-top: auto;
+}
+
+@media (max-width: 768px) {
+    .skeletonCard {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .skeletonImage {
+        width: 60px;
+        height: 60px;
+    }
+
+    .skeletonButton {
+        width: 80%;
+    }
+}

src/pages/profile/components/profile-card-skeleton/index.tsx

@@ -1,17 +1,34 @@
-import { Card, CardContent, CardMedia, Skeleton } from '@mui/material'
-import React from 'react'
+import React from 'react';
+import Styles from './profileSkeleton.module.scss';
 
-export default function ProfileCardSkeleton() {
-  return (
-    <Card>
-      <CardMedia component={Skeleton} variant="rectangular" height={200} />
-      <CardContent style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}>
-        <Skeleton width={100} height={30} animation="pulse" />
-        <Skeleton width={100} height={30} animation="pulse" />
-      </CardContent>
-    </Card>
-  )
+export  default function ProfileCardSkeleton() {
+    return (
+        <div className={Styles.profileSkeleton}>
+            <div className={Styles.avatarSection}>
+                <div className={Styles.avatarContainer}></div>
+                <h2 className={Styles.skeletonText}></h2>
+                <div className={Styles.userDetails}>
+                    {Array(5).fill(0).map((_, index) => (
+                        <div className={Styles.detailRow} key={index}>
+                            <span className={Styles.skeletonLabel}></span>
+                            <span className={Styles.skeletonValue}></span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            <div className={Styles.infoSection}>
+                <h2 className={Styles.skeletonText}></h2>
+                {Array(7).fill(0).map((_, index) => (
+                    <div className={Styles.inputRow} key={index}>
+                        <label className={Styles.skeletonLabel}></label>
+                        <div className={Styles.skeletonInput}></div>
+                    </div>
+                ))}
+                <div className={Styles.saveButtonContainer}>
+                    <div className={Styles.skeletonButton}></div>
+                </div>
+            </div>
+        </div>
+    );
 }