add loading all page & change bugs

app/component/ItemDoctor.js

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { Button } from "@mui/material";
+import { Button, Skeleton } from "@mui/material";
 
 // Icons
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
@@ -7,60 +7,74 @@ import ClockD from "@/components/icons/ClockD";
 import LikeD from "@/components/icons/LikeD";
 import PointD from "@/components/icons/PointD";
 import Link from "next/link";
+import CustomLoading from "./loading/Custom";
+import TextLoading from "./loading/Text";
+import CircularLoading from "./loading/Circular";
 
-function ItemDoctor({ doctor }) {
+function ItemDoctor({ doctor, loading }) {
     return (
         <li className="p-4 relative rounded-lg bg-[#FFF] border border-[#EFEFEF]">
             {/* Detail Doctor */}
             <div className="flex items-center justify-start gap-2.5">
-                <Image
+                <CircularLoading loading={loading} width={66} height={66}>
-                    width={72}
+                    <Image
-                    height={72}
+                        width={72}
-                    src={doctor.img}
+                        height={72}
-                    alt="image-doctor"
+                        src={doctor.img}
-                    className="py-1.5"
+                        alt="image-doctor"
-                />
+                        className="w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
+                    />
+                </CircularLoading>
                 <div className="flex flex-col items-start justify-center gap-2">
-                    <p className="text-[#3B3B3B] text-[14px] font-bold">{doctor.name}</p>
+                    <TextLoading width={90} height={15} loading={loading}>
-                    <p className="text-[#616161] text-[14px] font-normal">تخصص: {doctor.expertise}</p>
+                        <p className="text-[#3B3B3B] text-[14px] font-bold">{doctor.name}</p>
-                    <div className="flex rounded items-center justify-start gap-2">
+                    </TextLoading>
-                        <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
+                    <TextLoading width={120} height={15} loading={loading}>
-                            <LikeD />
+                        <p className="text-[#616161] text-[14px] font-normal">تخصص: {doctor.expertise}</p>
-                            <p className="text-[#616161] text-[12px] font-normal">{doctor.satisfaction}%</p>
+                    </TextLoading>
+                    <CustomLoading width={100} height={25} loading={loading}>
+                        <div className="flex rounded items-center justify-start gap-2">
+                            <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
+                                <LikeD />
+                                <p className="text-[#616161] text-[12px] font-normal">{doctor.satisfaction}%</p>
+                            </div>
+                            <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
+                                <PointD />
+                                <p className="text-[#616161] text-[12px] font-normal">{doctor.point}</p>
+                            </div>
                         </div>
-                        <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
+                    </CustomLoading>
-                            <PointD />
-                            <p className="text-[#616161] text-[12px] font-normal">{doctor.point}</p>
-                        </div>
-                    </div>
                 </div>
             </div>
 
             {/* Hours of work */}
-            <div className="flex my-4 items-start justify-start gap-0.5">
+            <div className="flex my-4 items-center justify-start gap-0.5">
                 <ClockD />
-                <p className="text-[#7E7E7E] text-[12px] font-normal">ساعت کاری: {doctor.hours_of_work}</p>
+                <TextLoading width={150} height={15} loading={loading}>
+                    <p className="text-[#7E7E7E] text-[12px] font-normal">ساعت کاری: {doctor.hours_of_work}</p>
+                </TextLoading>
             </div>
-            <p
+            <CustomLoading loading={loading} width={150} height={20}>
-                className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
+                <p
+                    className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
                     ${doctor.free_turn ?
-                        'bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]' :
+                            'bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]' :
-                        'bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]'
+                            'bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]'
-                    }`}
+                        }`}
-            >{doctor.free_turn ?
+                >{doctor.free_turn ?
-                `اولین نوبت آزاد: ${doctor.free_turn}` :
+                    `اولین نوبت آزاد: ${doctor.free_turn}` :
-                'نوبت ندارد'
+                    'نوبت ندارد'
-                }</p>
+                    }</p>
-
+            </CustomLoading>
             {/* Arrow */}
             <Link href={`/doctor/${doctor.id}`}>
                 <Button
                     className={`!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit 
-                    ${doctor.free_turn ?
+                    ${!doctor.free_turn || loading ?
-                            '!bg-[#5559CE]' :
+                            '!bg-[#D7D7D7]' :
-                            '!bg-[#D7D7D7]'
+                            '!bg-[#5559CE]'
                         }`}
-                    disabled={!doctor.free_turn}
+                    disabled={!doctor.free_turn || loading}
                 >
                     <ArrowLeftD />
                 </Button>

app/component/comment/index.js

@@ -2,21 +2,21 @@
 import { useState } from 'react';
 import ItemUser from './ItemUser'
 
-function Comment({ data }) {
+function Comment({ data, loading }) {
 
     const [list, setList] = useState(data.comments);
     const [update, setUpdate] = useState(false);
 
     return (
-        <ul className={`flex flex-col !pl-2.5 justify-start max-h-[492px] overflow-auto items-start gap-12 mt-2 ${false && 'w-full'}`}>
+        <ul className={`flex flex-col comment-list !pl-2.5 justify-start max-h-[492px] overflow-auto items-start gap-12 mt-2 ${false && 'w-full'}`}>
             {data && !!data.comments.length && data.comments.map((item, idx) => (
                 <ItemUser
                     key={idx}
                     list={list}
                     data={item}
                     update={update}
-                    loading={false}
                     setList={setList}
+                    loading={loading}
                     setUpdate={setUpdate}
                 />
             ))}

app/component/loading/Circular.js

@@ -0,0 +1,13 @@
+import { Skeleton } from '@mui/material'
+
+function CircularLoading({ loading, width, height, children }) {
+    return loading ? (
+        <Skeleton
+            variant="circular"
+            height={height}
+            width={width}
+        />
+    ) : children
+}
+
+export default CircularLoading

app/component/loading/Custom.js

@@ -0,0 +1,14 @@
+import { Skeleton } from "@mui/material"
+
+function CustomLoading({ width, height, children, loading }) {
+    return loading ? (
+        <Skeleton
+            className={width === 'full' ? '!w-full' : ''}
+            height={height}
+            variant="rounded"
+            width={width}
+        />
+    ) : children
+}
+
+export default CustomLoading

app/component/loading/Multiline.js

@@ -0,0 +1,14 @@
+import { Skeleton } from "@mui/material"
+
+function MultilineLoading({ loading, width, height, children, line }) {
+    return loading ? Array(line).fill({}).map(_ => (
+        <Skeleton
+            className={`${width === 'full' ? '!w-full' : ''} !my-2`}
+            variant="rounded"
+            height={height}
+            width={width}
+        />
+    )) : children
+}
+
+export default MultilineLoading

app/component/loading/Text.js

@@ -0,0 +1,14 @@
+import { Skeleton } from '@mui/material'
+
+function TextLoading({ loading, width, height, children }) {
+    return loading ? (
+        <Skeleton
+            className={width === 'full' ? '!w-full' : ''}
+            variant="rounded"
+            height={height}
+            width={width}
+        />
+    ) : children
+}
+
+export default TextLoading

app/globals.css

@@ -286,6 +286,10 @@ html {
     height: 0;
 }
 
+.comment-list::-webkit-scrollbar {
+    height: 10px;
+}
+
 .opacity-page {
     animation: loadPageOpacity;
     animation-duration: 1s;

components/blog/detail/Caption.js

@@ -1,31 +1,45 @@
+import CustomLoading from '@/app/component/loading/Custom'
+import MultilineLoading from '@/app/component/loading/Multiline'
 import Image from 'next/image'
 import React from 'react'
 
-function Caption({ data }) {
+function Caption({ data, loading }) {
     return (
         <>
-            <Image
+            <CustomLoading loading={loading} width='full' height={500}>
-                className="rounded-[8px] overflow-hidden w-full"
+                <Image
-                src={data.cover_first}
+                    className="rounded-[8px] overflow-hidden w-full"
-                alt="cover-blog"
+                    src={data.cover_first}
-                height={570}
+                    alt="cover-blog"
-                width={808}
+                    height={570}
-            />
+                    width={808}
-            <div
+                />
-                className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
+            </CustomLoading>
-                dangerouslySetInnerHTML={{ __html: data.caption }}
+            <div className={loading ? 'my-4' : ''}>
-            />
+                <MultilineLoading loading={loading} width='full' height={18} line={20}>
-            <Image
+                    <div
-                className="rounded-[8px] overflow-hidden w-full"
+                        className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
-                src={data.cover_second}
+                        dangerouslySetInnerHTML={{ __html: data.caption }}
-                alt="cover-blog"
+                    />
-                height={570}
+                </MultilineLoading>
-                width={808}
+            </div>
-            />
+            <CustomLoading loading={loading} width='full' height={500}>
-            <div
+                <Image
-                className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
+                    className="rounded-[8px] overflow-hidden w-full"
-                dangerouslySetInnerHTML={{ __html: data.caption }}
+                    src={data.cover_second}
-            />
+                    alt="cover-blog"
+                    height={570}
+                    width={808}
+                />
+            </CustomLoading>
+            <div className={loading ? 'my-4' : ''}>
+                <MultilineLoading loading={loading} width='full' height={18} line={20}>
+                    <div
+                        className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
+                        dangerouslySetInnerHTML={{ __html: data.caption }}
+                    />
+                </MultilineLoading>
+            </div>
         </>
     )
 }

components/blog/detail/SocialMedia.js

@@ -1,3 +1,4 @@
+import CircularLoading from "@/app/component/loading/Circular"
 import LinkedinB from "@/components/icons/LinkedinB"
 import TelegramB from "@/components/icons/TelegramB"
 import WhatsappB from "@/components/icons/WhatsappB"
@@ -8,16 +9,18 @@ const socials = [
     <LinkedinB />
 ]
 
-function SocialMedia() {
+function SocialMedia({ loading }) {
     return (
         <ul className="flex mt-0 sm:mt-[3px] md:mt-[6px] lg:mt-[8px] pb-[16px] sm:pb-[21px] md:pb-[27px] lg:pb-[32px] relative items-center justify-end gap-4">
             {socials.map((item, idx) => (
-                <li
+                <CircularLoading width={36} height={36} loading={loading}>
-                    key={idx}
+                    <li
-                    className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
+                        key={idx}
-                >
+                        className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
-                    {item}
+                    >
-                </li>
+                        {item}
+                    </li>
+                </CircularLoading>
             ))}
             <span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
         </ul>

components/blog/detail/commentUser/index.js

@@ -4,14 +4,14 @@ import Underline from '@/components/icons/Underline'
 import React from 'react'
 import AddComment from './AddComment'
 
-function CommentUser({ data }) {
+function CommentUser({ data, loading }) {
     return (
         <div className='mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]'>
             <AnimationTextHead name='zoom-in-up' text='نظرات'>
                 <Underline />
             </AnimationTextHead>
             <AddComment />
-            <Comment data={data} />
+            <Comment data={data} loading={loading} />
         </div>
     )
 }

components/blog/detail/index.js

@@ -2,12 +2,12 @@ import Caption from "./Caption";
 import SocialMedia from "./SocialMedia";
 import CommentUser from "./commentUser";
 
-function Detail({ data }) {
+function Detail({ data, loading }) {
     return (
         <div className="w-full lg:w-[68%]">
-            <Caption data={data} />
+            <Caption data={data} loading={loading} />
-            <SocialMedia />
+            <SocialMedia loading={loading} />
-            <CommentUser data={data} />
+            <CommentUser data={data} loading={loading} />
         </div>
     )
 }

components/blog/head/index.js

@@ -1,20 +1,32 @@
-function Head({ data }) {
+import TextLoading from "@/app/component/loading/Text"
+
+function Head({ data, loading }) {
     return (
         <div>
-            <div className="flex items-center justify-start gap-1">
+            <TextLoading width={200} height={18} loading={loading}>
-                <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">بلاگ {'>'}</p>
+                <div className="flex items-center justify-start gap-1">
-                <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">پوست و مو {'>'}</p>
+                    <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">بلاگ {'>'}</p>
-                <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">روش های خانگی محافظت از پوست در تابستان</p>
+                    <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">پوست و مو {'>'}</p>
+                    <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">روش های خانگی محافظت از پوست در تابستان</p>
+                </div>
+            </TextLoading>
+            <div className={loading ? 'mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]' : ''}>
+                <TextLoading width={250} height={22} loading={loading}>
+                    <p className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">روش های خانگی محافظت از پوست در تابستان</p>
+                </TextLoading>
             </div>
-            <p className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">روش های خانگی محافظت از پوست در تابستان</p>
             <div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
                 <div className="flex items-center justify-start gap-1">
                     <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">تاریخ انتشار:</p>
-                    <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.date_of_release}</p>
+                    <TextLoading width={55} height={22} loading={loading}>
+                        <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.date_of_release}</p>
+                    </TextLoading>
                 </div>
                 <div className="flex items-center justify-start gap-1">
                     <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">زمان مطالعه:</p>
-                    <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.time}</p>
+                    <TextLoading width={55} height={22} loading={loading}>
+                        <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.time}</p>
+                    </TextLoading>
                 </div>
             </div>
         </div>

components/blog/index.js

@@ -1,14 +1,26 @@
+'use client'
+
+import { useEffect, useState } from "react";
 import Detail from "./detail";
 import Head from "./head";
 import RelatedContent from "./relatedContent";
 
 function BlogPage({ article, articles }) {
+
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    }, []);
+
     return (
         <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
-            <Head data={article} />
+            <Head data={article} loading={loading} />
             <div className="flex flex-col gap-y-[32px] lg:flex-row items-start justify-center gap-[24px] mt-[16px] sm:mt-[19px] md:mt-[21px] lg:mt-[24px]">
-                <Detail data={article} />
+                <Detail data={article} loading={loading} />
-                <RelatedContent data={articles} />
+                <RelatedContent data={articles} loading={loading} />
             </div>
         </div>
     )

components/blog/relatedContent/Item.js

@@ -1,31 +1,40 @@
+import CircularLoading from "@/app/component/loading/Circular";
+import CustomLoading from "@/app/component/loading/Custom";
+import TextLoading from "@/app/component/loading/Text";
 import Image from "next/image";
 import Link from "next/link";
 
-function Item({ data, idx }) {
+function Item({ data, idx, loading }) {
     return (
         <li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
-            <Link href={`/blog/${data.id}`}>
+            <CustomLoading width={80} height={72} loading={loading}>
-                <Image
+                <Link href={`/blog/${data.id}`}>
-                    className="
+                    <Image
+                        className="
                         min-w-[64px] sm:min-w-[73px] md:min-w-[85px] lg:min-w-[97px] 
                         min-h-[56px] sm:min-h-[64px] md:min-h-[75px] lg:min-h-[88px] 
                         rounded-[8px] overflow-hidden object-cover
                     "
-                    src={data.src}
+                        src={data.src}
-                    alt="article"
+                        alt="article"
-                    height={88}
+                        height={88}
-                    width={97}
+                        width={97}
-                />
+                    />
-            </Link>
-            <div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
-                <Link href={`/blog/${data.id}`}>
-                    <p
-                        className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap"
-                    >{data.title}</p>
                 </Link>
-                <p
+            </CustomLoading>
-                    className="text-[#9B9B9B] text-[12px] text-nowrap font-normal"
+            <div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
-                >تاریخ انتشار: {data.date_of_release}</p>
+                <TextLoading width={150} height={18} loading={loading}>
+                    <Link href={`/blog/${data.id}`}>
+                        <p
+                            className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap"
+                        >{data.title}</p>
+                    </Link>
+                </TextLoading>
+                <TextLoading width={110} height={18} loading={loading}>
+                    <p
+                        className="text-[#9B9B9B] text-[12px] text-nowrap font-normal"
+                    >تاریخ انتشار: {data.date_of_release}</p>
+                </TextLoading>
             </div>
             {data.id > idx + 1 && (
                 <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>

components/blog/relatedContent/index.js

@@ -3,7 +3,7 @@ import UnderlineLG from '@/components/icons/UnderlineLG'
 import React from 'react'
 import Item from './Item'
 
-function RelatedContent({ data }) {
+function RelatedContent({ data, loading }) {
   return (
     <div className='p-[12px] w-full lg:w-fit md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]'>
       <AnimationTextHead name='fade-up' text='مطالب مرتبط'>
@@ -15,6 +15,7 @@ function RelatedContent({ data }) {
             idx={idx}
             data={item}
             key={item.id}
+            loading={loading}
           />
         ))}
       </ul>

components/blogs/Head.js

@@ -1,47 +1,73 @@
+import CustomLoading from '@/app/component/loading/Custom'
+import TextLoading from '@/app/component/loading/Text'
 import Image from 'next/image'
 import Link from 'next/link'
 
-function Head() {
+function Head({ loading }) {
     return (
         <div className='flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
             <Link href='#' className='w-full lg:w-1/2 cover-head-blogs'>
-                <Image
+                <CustomLoading loading={loading} width='full' height={400}>
-                    src='/assets/images/head-blogs-1.png'
-                    width={600}
-                    height={424}
-                    alt='head blog'
-                />
-                <p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>روش های خانگی محافظت از پوست در تابستان</p>
-            </Link>
-            <div className='w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
-                <div className='w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
-                    <Link href='#' className='w-full cover-head-blogs'>
-                        <Image
-                            src='/assets/images/head-blogs-2.png'
-                            width={600}
-                            height={424}
-                            alt='head blog'
-                        />
-                        <p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>فواید نوشیدن آب برای سلامتی</p>
-                    </Link>
-                    <Link href='#' className='w-full cover-head-blogs'>
-                        <Image
-                            src='/assets/images/head-blogs-3.png'
-                            width={600}
-                            height={424}
-                            alt='head blog'
-                        />
-                        <p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>راهکارهای ساده برای درمان سر درد</p>
-                    </Link>
-                </div>
-                <Link href='#' className='w-full cover-head-blogs'>
                     <Image
-                        src='/assets/images/head-blogs-4.png'
+                        src='/assets/images/head-blogs-1.png'
                         width={600}
                         height={424}
                         alt='head blog'
                     />
-                    <p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>تغذیه مناسب برای کاهش فشار خون</p>
+                </CustomLoading>
+                <div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
+                    <TextLoading width={150} height={20} loading={loading}>
+                        <p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>روش های خانگی محافظت از پوست در تابستان</p>
+                    </TextLoading>
+                </div>
+            </Link>
+            <div className='w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
+                <div className='w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
+                    <Link href='#' className='w-full cover-head-blogs'>
+                        <CustomLoading loading={loading} width='full' height={180}>
+                            <Image
+                                src='/assets/images/head-blogs-2.png'
+                                width={600}
+                                height={424}
+                                alt='head blog'
+                            />
+                        </CustomLoading>
+                        <div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
+                            <TextLoading width={150} height={20} loading={loading}>
+                                <p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>فواید نوشیدن آب برای سلامتی</p>
+                            </TextLoading>
+                        </div>
+                    </Link>
+                    <Link href='#' className='w-full cover-head-blogs'>
+                        <CustomLoading loading={loading} width='full' height={180}>
+                            <Image
+                                src='/assets/images/head-blogs-3.png'
+                                width={600}
+                                height={424}
+                                alt='head blog'
+                            />
+                        </CustomLoading>
+                        <div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
+                            <TextLoading width={150} height={20} loading={loading}>
+                                <p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>راهکارهای ساده برای درمان سر درد</p>
+                            </TextLoading>
+                        </div>
+                    </Link>
+                </div>
+                <Link href='#' className='w-full cover-head-blogs'>
+                    <CustomLoading loading={loading} width='full' height={180}>
+                        <Image
+                            src='/assets/images/head-blogs-4.png'
+                            width={600}
+                            height={424}
+                            alt='head blog'
+                        />
+                    </CustomLoading>
+                    <div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
+                        <TextLoading width={150} height={20} loading={loading}>
+                            <p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>تغذیه مناسب برای کاهش فشار خون</p>
+                        </TextLoading>
+                    </div>
                 </Link>
             </div>
         </div>

components/blogs/index.js

@@ -1,13 +1,26 @@
+'use client';
+
+import { useEffect, useState } from "react";
+
 import Head from "./Head";
 import Title from "./title";
 import LatestArticles from "./latestArticles";
 
 function BlogsPage() {
+
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    }, []);
+
     return (
         <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
             <Title />
-            <Head />
+            <Head loading={loading} />
-            <LatestArticles />
+            <LatestArticles loading={loading} />
         </div>
     )
 }

components/blogs/latestArticles/Article.js

@@ -1,25 +1,37 @@
+import CustomLoading from '@/app/component/loading/Custom';
+import TextLoading from '@/app/component/loading/Text';
 import Image from 'next/image'
 import Link from 'next/link';
 
-function Article({ data }) {
+function Article({ data, loading }) {
     return (
         <li className='rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]'>
-            <Link href={`/blog/${data.id}`}>
+            <CustomLoading width='full' height={200} loading={loading}>
-                <Image
-                    className='w-full'
-                    alt="article-img"
-                    src={data.src}
-                    height={217}
-                    width={392}
-                />
-            </Link>
-            <div className='p-[12px] md:p-[14px] lg:p-[16px]'>
                 <Link href={`/blog/${data.id}`}>
-                    <p className='text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold'>{data.title}</p>
+                    <Image
+                        className='w-full'
+                        alt="article-img"
+                        src={data.src}
+                        height={217}
+                        width={392}
+                    />
                 </Link>
+            </CustomLoading>
+            <div className='p-[12px] md:p-[14px] lg:p-[16px]'>
+                <div className={loading ? 'mb-[12px] md:mb-[14px] lg:mb-[16px]' : ''}>
+                    <TextLoading width={150} height={18} loading={loading}>
+                        <Link href={`/blog/${data.id}`}>
+                            <p className='text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold'>{data.title}</p>
+                        </Link>
+                    </TextLoading>
+                </div>
                 <div className='flex items-center justify-start gap-[35px]'>
-                    <p className='text-[#9B9B9B] text-[14px] font-medium'>تاریخ انتشار: {data.date_of_release}</p>
+                    <TextLoading width={100} height={18} loading={loading}>
-                    <p className='text-[#9B9B9B] text-[14px] font-medium'>زمان مطالعه: {data.time}</p>
+                        <p className='text-[#9B9B9B] text-[14px] font-medium'>تاریخ انتشار: {data.date_of_release}</p>
+                    </TextLoading>
+                    <TextLoading width={110} height={18} loading={loading}>
+                        <p className='text-[#9B9B9B] text-[14px] font-medium'>زمان مطالعه: {data.time}</p>
+                    </TextLoading>
                 </div>
             </div>
         </li>

components/blogs/latestArticles/index.js

@@ -2,7 +2,7 @@ import articles from '@/data/articles.json';
 import Article from "./Article";
 import Pagination from '@/app/component/Pagination';
 
-function LatestArticles() {
+function LatestArticles({ loading }) {
     return (
         <div>
             <p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">جدیدترین مقاله ها</p>
@@ -11,6 +11,7 @@ function LatestArticles() {
                     <Article
                         data={item}
                         key={item.id}
+                        loading={loading}
                     />
                 ))}
             </ul>

components/clinic/components/about/ContentDetail.js

@@ -1,9 +1,12 @@
+import TextLoading from '@/app/component/loading/Text'
 import React from 'react'
 
-function ContentDetail({ head, children }) {
+function ContentDetail({ head, children, loading }) {
     return (
         <div className='my-[24px]'>
-            <p className='text-[#3B3B3B] text-[20px] font-bold'>{head}</p>
+            <TextLoading width={200} height={20} loading={loading}>
+                <p className='text-[#3B3B3B] text-[20px] font-bold'>{head}</p>
+            </TextLoading>
             <div className='mt-[16px]'>
                 {children}
             </div>

components/clinic/components/about/ListBime.js

@@ -1,21 +1,24 @@
+import CustomLoading from '@/app/component/loading/Custom'
 import Image from 'next/image'
 
-function ListBime({ data }) {
+function ListBime({ data, loading }) {
     return (
         <ul className='flex overflow-auto hidden-scroll  mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]'>
             {data.list_bime.map((item, idx) => (
-                <li
+                <CustomLoading width={156} height={110} loading={loading}>
-                    key={idx}
+                    <li
-                    className='p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]'
+                        key={idx}
-                >
+                        className='p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]'
-                    <Image
+                    >
-                        src={item.img}
+                        <Image
-                        height={92}
+                            src={item.img}
-                        width={92}
+                            height={92}
-                        alt='bime'
+                            width={92}
-                    />
+                            alt='bime'
-                    <p className='text-[#525252] text-[16px] font-medium'>{item.name}</p>
+                        />
-                </li>
+                        <p className='text-[#525252] text-[16px] font-medium'>{item.name}</p>
+                    </li>
+                </CustomLoading>
             ))}
         </ul>
     )

components/clinic/components/about/Services.js

@@ -1,6 +1,7 @@
+import TextLoading from '@/app/component/loading/Text';
 import TickCircleOrange from '@/components/icons/TickCircleOrange';
 
-function Services({ data }) {
+function Services({ data, loading }) {
   return (
     <ul className='
     mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4
@@ -14,12 +15,14 @@ function Services({ data }) {
           <div className='min-w-[24px] min-h-[24px]'>
             <TickCircleOrange />
           </div>
-          <p
+          <TextLoading width={80} height={18} loading={loading}>
-            className={`
+            <p
+              className={`
             text-[16px] font-normal 
             ${idx === 0 ? 'text-[#F17732]' : 'text-[#525252]'}
           `}
-          >{item}</p>
+            >{item}</p>
+          </TextLoading>
         </li>
       ))}
     </ul>

components/clinic/components/about/Specialties.js

@@ -1,6 +1,7 @@
+import TextLoading from '@/app/component/loading/Text';
 import TickCircleOrange from '@/components/icons/TickCircleOrange';
 
-function Specialties({ data }) {
+function Specialties({ data, loading }) {
     return (
         <ul className='
         mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4
@@ -14,12 +15,14 @@ function Specialties({ data }) {
                     <div className='min-w-[24px] min-h-[24px]'>
                         <TickCircleOrange />
                     </div>
-                    <p
+                    <TextLoading width={80} height={18} loading={loading}>
-                        className={`
+                        <p
+                            className={`
                         text-[16px] font-normal
                         ${idx === 0 ? 'text-[#F17732]' : 'text-[#525252]'}
                     `}
-                    >{item}</p>
+                        >{item}</p>
+                    </TextLoading>
                 </li>
             ))}
         </ul>

components/clinic/components/about/iamges/Images.js

@@ -1,25 +0,0 @@
-import List from './List';
-import Slider from './Slider';
-import Image from 'next/image';
-
-function Images({ data }) {
-    return (
-        <div
-            className='
-            flex flex-col md:flex-row items-center mb-[8px] justify-center w-full
-            gap-[12px] md:gap-[18px] lg:gap-[24px]
-        '>
-            <Image
-                className="rounded-[8px] overflow-hidden"
-                src={data.images_clinic[0]}
-                alt="img clinic"
-                height={432}
-                width={600}
-            />
-            <List data={data} />
-            <Slider data={data} />
-        </div>
-    )
-}
-
-export default Images

components/clinic/components/about/iamges/List.js

@@ -1,38 +0,0 @@
-import Image from 'next/image';
-
-function List({ data }) {
-    return (
-        <div className="hidden md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
-            <Image
-                className="rounded-[8px] overflow-hidden"
-                src={data.images_clinic[1]}
-                alt="img clinic"
-                height={204}
-                width={288}
-            />
-            <Image
-                className="rounded-[8px] overflow-hidden"
-                src={data.images_clinic[2]}
-                alt="img clinic"
-                height={204}
-                width={288}
-            />
-            <Image
-                className="rounded-[8px] overflow-hidden"
-                src={data.images_clinic[3]}
-                alt="img clinic"
-                height={204}
-                width={288}
-            />
-            <Image
-                className="rounded-[8px] overflow-hidden"
-                src={data.images_clinic[4]}
-                alt="img clinic"
-                height={204}
-                width={288}
-            />
-        </div>
-    )
-}
-
-export default List

components/clinic/components/about/iamges/Slider.js

@@ -1,21 +0,0 @@
-import Image from "next/image"
-
-function Slider({ data }) {
-    return (
-        <ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
-            {[...data.images_clinic, ...data.images_clinic].map((item, idx) =>
-                idx !== 0 ? (
-                    <Image
-                        key={idx}
-                        src={item}
-                        width={90}
-                        height={90}
-                        alt="image clinic"
-                        className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
-                    />
-                ) : undefined)}
-        </ul>
-    )
-}
-
-export default Slider

components/clinic/components/about/images/Images.js

@@ -0,0 +1,30 @@
+import List from './List';
+import Slider from './Slider';
+import Image from 'next/image';
+import CustomLoading from '@/app/component/loading/Custom';
+
+function Images({ data, loading }) {
+    return (
+        <div
+            className='
+            flex flex-col md:flex-row items-center mb-[8px] justify-center w-full
+            gap-[12px] md:gap-[18px] lg:gap-[24px] overflow-hidden
+        '>
+            <div className='w-full'>
+                <CustomLoading loading={loading} width={600} height={400}>
+                    <Image
+                        className="rounded-[8px] overflow-hidden"
+                        src={data.images_clinic[0]}
+                        alt="img clinic"
+                        height={432}
+                        width={600}
+                    />
+                </CustomLoading>
+            </div>
+            <List data={data} loading={loading} />
+            <Slider data={data} loading={loading} />
+        </div>
+    )
+}
+
+export default Images

components/clinic/components/about/images/List.js

@@ -0,0 +1,55 @@
+import CustomLoading from '@/app/component/loading/Custom';
+import Image from 'next/image';
+
+function List({ data, loading }) {
+    return (
+        <div className="hidden w-full md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
+            <div className='w-full'>
+                <CustomLoading loading={loading} width='full' height={190}>
+                    <Image
+                        className="rounded-[8px] overflow-hidden"
+                        src={data.images_clinic[1]}
+                        alt="img clinic"
+                        height={204}
+                        width={288}
+                    />
+                </CustomLoading>
+            </div>
+            <div className='w-full'>
+                <CustomLoading loading={loading} width='full' height={190}>
+                    <Image
+                        className="rounded-[8px] overflow-hidden"
+                        src={data.images_clinic[2]}
+                        alt="img clinic"
+                        height={204}
+                        width={288}
+                    />
+                </CustomLoading>
+            </div>
+            <div className='w-full'>
+                <CustomLoading loading={loading} width='full' height={190}>
+                    <Image
+                        className="rounded-[8px] overflow-hidden"
+                        src={data.images_clinic[3]}
+                        alt="img clinic"
+                        height={204}
+                        width={288}
+                    />
+                </CustomLoading>
+            </div>
+            <div className='w-full'>
+                <CustomLoading loading={loading} width='full' height={190}>
+                    <Image
+                        className="rounded-[8px] overflow-hidden"
+                        src={data.images_clinic[4]}
+                        alt="img clinic"
+                        height={204}
+                        width={288}
+                    />
+                </CustomLoading>
+            </div>
+        </div>
+    )
+}
+
+export default List

components/clinic/components/about/images/Slider.js

@@ -0,0 +1,24 @@
+import CustomLoading from "@/app/component/loading/Custom"
+import Image from "next/image"
+
+function Slider({ data, loading }) {
+    return (
+        <ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
+            {[...data.images_clinic, ...data.images_clinic].map((item, idx) =>
+                idx !== 0 ? (
+                    <CustomLoading width={90} height={90} loading={loading}>
+                        <Image
+                            key={idx}
+                            src={item}
+                            width={90}
+                            height={90}
+                            alt="image clinic"
+                            className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
+                        />
+                    </CustomLoading>
+                ) : undefined)}
+        </ul>
+    )
+}
+
+export default Slider

components/clinic/components/about/index.js

@@ -2,34 +2,37 @@ import { useState } from "react";
 
 import ListBime from "./ListBime";
 import Services from "./Services";
-import Images from "./iamges/Images";
+import Images from "./images/Images";
 import { Button } from "@mui/material";
 import Specialties from "./Specialties";
 import ContentDetail from "./ContentDetail";
+import MultilineLoading from "@/app/component/loading/Multiline";
 
-function About({ data }) {
+function About({ data, loading }) {
 
     const [isMore, setIsMore] = useState(false);
 
     return (
         <div className="opacity-page transition-all duration-500">
-            <Images data={data} />
+            <Images data={data} loading={loading} />
-            <ContentDetail head='کلینیک تخصصی و فوق تخصصی نیکان'>
+            <ContentDetail loading={loading} head='کلینیک تخصصی و فوق تخصصی نیکان'>
                 <div className="flex flex-col items-center justify-center">
-                    <p
+                    <MultilineLoading line={10} loading={loading} width='full' height={18}>
-                        className={`
+                        <p
+                            className={`
                         text-[#525252] text-[16px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[32px] overflow-hidden relative
                         after:absolute after:right-0 after:bottom-0 after:h-[80px]
                         after:shadow-xl after:w-full transition-all duration-500
                         ${isMore ?
-                                'after:bg-transparent max-h-screen' :
+                                    'after:bg-transparent max-h-screen' :
-                                'after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]'
+                                    'after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]'
-                            }
+                                }
                     `}
-                        dangerouslySetInnerHTML={{ __html: data.caption }}
+                            dangerouslySetInnerHTML={{ __html: data.caption }}
-                    ></p>
+                        ></p>
+                    </MultilineLoading>
                     <Button
-                        className="!text-[#F17732] !text-[14px] !font-light !p-2"
+                        className={`${loading && '!hidden'} !text-[#F17732] !text-[14px] !font-light !p-2`}
                         onClick={() => setIsMore(!isMore)}
                         variant="text"
                     >
@@ -38,13 +41,13 @@ function About({ data }) {
                 </div>
             </ContentDetail>
             <ContentDetail head='بیمه های طرف قرارداد'>
-                <ListBime data={data} />
+                <ListBime loading={loading} data={data} />
             </ContentDetail>
             <ContentDetail head='تخصص ها'>
-                <Specialties data={data} />
+                <Specialties loading={loading} data={data} />
             </ContentDetail>
             <ContentDetail head='خدمات'>
-                <Services data={data} />
+                <Services loading={loading} data={data} />
             </ContentDetail>
         </div>
     )

components/clinic/components/contact/ContentDetail.js

@@ -1,8 +1,14 @@
-function ContentDetail({ head, detail }) {
+import TextLoading from "@/app/component/loading/Text";
+
+function ContentDetail({ head, detail, loading }) {
     return (
         <li className="flex flex-col items-start justify-center gap-4">
-            <p className="text-[#525252] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">{head}</p>
+            <TextLoading width={100} height={18} loading={loading}>
-            <p className="text-[14px] md:text-[16px] text-[#525252]">{detail}</p>
+                <p className="text-[#525252] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">{head}</p>
+            </TextLoading>
+            <TextLoading width={160} height={18} loading={loading}>
+                <p className="text-[14px] md:text-[16px] text-[#525252]">{detail}</p>
+            </TextLoading>
         </li>
     )
 }

components/clinic/components/contact/Detail.js

@@ -1,22 +1,26 @@
 import ContentDetail from "./ContentDetail"
 
-function Detail({ data }) {
+function Detail({ data, loading }) {
     return (
         <ul className="flex flex-col items-start justify-start gap-[16px]">
             <ContentDetail
                 head='روزهای کاری: '
+                loading={loading}
                 detail={`ساعت کاری: ${data.hours_of_work}`}
             />
             <ContentDetail
                 head='تلفن: '
+                loading={loading}
                 detail={`${data.phone_number_1} ${data.phone_number_2}`}
             />
             <ContentDetail
                 head='ایمیل:'
+                loading={loading}
                 detail={data.email}
             />
             <ContentDetail
                 head='آدرس: '
+                loading={loading}
                 detail={data.location}
             />
         </ul>

components/clinic/components/contact/index.js

@@ -5,8 +5,9 @@ import { Button } from "@mui/material";
 import Detail from "./Detail";
 import RoutingC from "@/components/icons/RoutingC";
 import ModalOpenLocation from "@/app/component/openLocation";
+import CustomLoading from "@/app/component/loading/Custom";
 
-function Contact({ data }) {
+function Contact({ data, loading }) {
 
     const [open, setOpen] = useState(false);
     const handleOpen = () => setOpen(true);
@@ -21,7 +22,7 @@ function Contact({ data }) {
             "
         >
             <div className="flex items-end justify-between">
-                <Detail data={data} />
+                <Detail data={data} loading={loading} />
                 <ModalOpenLocation
                     open={open}
                     setOpen={setOpen}
@@ -40,23 +41,25 @@ function Contact({ data }) {
             <div
                 className="w-full relative h-[460px] mt-[24px]"
             >
-                <iframe
+                <CustomLoading width='full' height={400} loading={loading}>
-                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.96777841153!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2snl!4v1723498499341!5m2!1sen!2snl"
+                    <iframe
-                    className='w-full h-full rounded-lg'
+                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.96777841153!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2snl!4v1723498499341!5m2!1sen!2snl"
-                    loading="lazy"
+                        className='w-full h-full rounded-lg'
-                ></iframe>
+                        loading="lazy"
-                <ModalOpenLocation
+                    ></iframe>
-                    open={open}
+                    <ModalOpenLocation
-                    setOpen={setOpen}
+                        open={open}
-                    handleClose={handleClose}
+                        setOpen={setOpen}
-                >
+                        handleClose={handleClose}
-                    <Button
-                        className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-full !border !border-[#5559CE] !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)]"
-                        onClick={handleOpen}
                     >
-                        <RoutingWhiteC />
+                        <Button
-                    </Button>
+                            className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-full !border !border-[#5559CE] !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)]"
-                </ModalOpenLocation>
+                            onClick={handleOpen}
+                        >
+                            <RoutingWhiteC />
+                        </Button>
+                    </ModalOpenLocation>
+                </CustomLoading>
             </div>
         </div>
     )

components/clinic/components/doctors/List.js

@@ -1,7 +1,7 @@
 import ItemDoctor from '@/app/component/ItemDoctor';
 import Pagination from '@/app/component/Pagination';
 
-function List({ doctors }) {
+function List({ doctors, loading }) {
     return (
         <>
             <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[40px] gap-[16px] md:gap-[20px] lg:gap-[24px]">
@@ -9,6 +9,7 @@ function List({ doctors }) {
                     <ItemDoctor
                         key={doctor.id}
                         doctor={doctor}
+                        loading={loading}
                     />
                 ))}
             </ul>

components/clinic/components/doctors/index.js

@@ -1,11 +1,11 @@
 import List from "./List"
 import SearchBar from "./SearchBar"
 
-function Doctors({ doctors }) {
+function Doctors({ doctors, loading }) {
     return (
         <div>
             <SearchBar />
-            <List doctors={doctors} />
+            <List loading={loading} doctors={doctors} />
         </div>
     )
 }

components/clinic/index.js

@@ -1,5 +1,6 @@
 'use client';
-import { useState } from 'react';
+
+import { useEffect, useState } from 'react';
 
 import About from './components/about';
 import Contact from './components/contact';
@@ -11,14 +12,21 @@ const listTab = ['درباره کلینیک', 'اطلاعات تماس', 'پزش
 function ClinicPage({ data, doctors }) {
 
   const [value, setValue] = useState(0);
+  const [loading, setLoading] = useState(true);
   const handleChange = (event, newValue) => setValue(newValue);
 
   const Components = [
-    <About data={data} />,
+    <About data={data} loading={loading} />,
-    <Contact data={data} />,
+    <Contact data={data} loading={loading} />,
-    <Doctors doctors={doctors} />
+    <Doctors doctors={doctors} loading={loading} />
   ];
 
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  }, []);
+
   return (
     <div className="pt-[40px] sm:pt-[70px] md:pt-[100px] lg:pt-[136px] mt-[40px] padding-responsive">
       <Tabs

components/clinics/index.js

@@ -1,9 +1,20 @@
-import HeadPageList from "@/app/component/head";
+'use client';
+
+import { useEffect, useState } from "react";
+
 import List from "./list";
 import SearchBar from "./head/SearchBar";
+import HeadPageList from "@/app/component/head";
 
 function ClinicsPage() {
 
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    }, []);
 
     return (
         <div>
@@ -13,7 +24,7 @@ function ClinicsPage() {
             >
                 <SearchBar />
             </HeadPageList>
-            <List />
+            <List loading={loading} />
         </div>
     )
 }

components/clinics/list/ItemClinic.js

@@ -1,3 +1,5 @@
+import CircularLoading from "@/app/component/loading/Circular"
+import TextLoading from "@/app/component/loading/Text"
 import ArrowLeftD from "@/components/icons/ArrowLeftD"
 import ClockClinic from "@/components/icons/ClockClinic"
 import LocationClinic from "@/components/icons/LocationClinic"
@@ -5,36 +7,47 @@ import { Button } from "@mui/material"
 import Image from "next/image"
 import Link from "next/link"
 
-function ItemClinic({ data }) {
+function ItemClinic({ data, loading }) {
     return (
         <li className="p-4 relative bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]">
             <div className="flex items-center justify-start gap-2">
-                <Image
+                <CircularLoading loading={loading} width={60} height={60}>
-                    width={60}
+                    <Image
-                    height={60}
+                        width={60}
-                    src={data.img}
+                        height={60}
-                    alt="img clinic"
+                        src={data.img}
-                />
+                        alt="img clinic"
+                    />
+                </CircularLoading>
                 <div className="flex flex-col items-start justify-center gap-2">
-                    <p className="text-[#3B3B3B] text-[14px] font-bold">{data.title}</p>
+                    <TextLoading loading={loading} width={100} height={18}>
-                    <p className="text-[#7E7E7E] text-[14px] font-normal">{data.doctors} پزشک</p>
+                        <p className="text-[#3B3B3B] text-[14px] font-bold">{data.title}</p>
+                    </TextLoading>
+                    <TextLoading loading={loading} width={60} height={18}>
+                        <p className="text-[#7E7E7E] text-[14px] font-normal">{data.doctors} پزشک</p>
+                    </TextLoading>
                 </div>
             </div>
             <div className="flex flex-col items-start mt-4 gap-4 mb-[14px]">
                 <div className="flex items-start justify-start gap-0.5">
                     <LocationClinic />
-                    <p className="text-[#7E7E7E] text-[12px] font-normal">{data.location}</p>
+                    <TextLoading loading={loading} width={150} height={18}>
+                        <p className="text-[#7E7E7E] text-[12px] font-normal">{data.location}</p>
+                    </TextLoading>
                 </div>
                 <div className="flex items-start justify-start gap-0.5 ml-[64px]">
                     <ClockClinic />
-                    <p className="text-[#7E7E7E] text-[12px] font-normal">ساعت کاری: {data.hours_of_work}</p>
+                    <TextLoading loading={loading} width={120} height={18}>
+                        <p className="text-[#7E7E7E] text-[12px] font-normal">ساعت کاری: {data.hours_of_work}</p>
+                    </TextLoading>
                 </div>
             </div>
 
             {/* Arrow */}
-            <Link href={`/clinic/${data.id}`}>
+            <Link href={loading ? '#' : `/clinic/${data.id}`}>
                 <Button
-                    className='!p-[14px] !bg-[#5559CE] !absolute !left-4 !bottom-4  !rounded-full !w-fit'
+                    className={`${loading ? '!bg-[#E7E7E7]' : '!bg-[#5559CE]'} !p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit`}
+                    disabled={loading}
                 >
                     <ArrowLeftD />
                 </Button>

components/clinics/list/index.js

@@ -3,9 +3,9 @@ import clinics from '@/data/clinics.json';
 import ItemClinic from "./ItemClinic";
 import Pagination from "@/app/component/Pagination";
 
-function List() {
+function List({ loading }) {
 
-    const listPage = ['کلینیک ها', 'اهواز']
+    const listPage = ['کلینیک ها', 'اهواز'];
 
     return (
         <div className="padding-responsive pt-[20px]">
@@ -18,6 +18,7 @@ function List() {
                     <ItemClinic
                         data={item}
                         key={item.id}
+                        loading={loading}
                     />
                 ))}
             </ul>

components/dashboard/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Layout from '../layout'
 
 function DashboardPage({ user, children, value, setValue, isOpenSide, setIsOpenSide }) {

components/dashboard/userAccount/ContentTabs.js

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 // Tabs
 import Turns from "./tabs/turns";
@@ -17,15 +17,23 @@ const listTab = ['حساب کاربری', 'نوبت های من', 'تراکنش
 
 function ContentTabs({ user, value, setValue, isOpenSide, setIsOpenSide }) {
 
+    const [loading, setLoading] = useState(true);
     const [isTurnsDetails, setIsTurnsDetails] = useState(false);
     const handleChange = (event, newValue) => setValue(newValue);
 
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(true);
+        }, 2000);
+    }, []);
+
+
     const components = [
         <DetailUser user={user} />,
-        <Turns user={user} setIsTurnsDetails={setIsTurnsDetails} />,
+        <Turns user={user} loading={loading} setIsTurnsDetails={setIsTurnsDetails} />,
-        <Transactions user={user} />,
+        <Transactions user={user} loading={loading} />,
-        <Comments user={user} />,
+        <Comments user={user} loading={loading} />,
-        <Messages user={user} />
+        <Messages user={user} loading={loading} />
     ];
 
     return (
@@ -43,7 +51,7 @@ function ContentTabs({ user, value, setValue, isOpenSide, setIsOpenSide }) {
                 <p className="text-[#525252] text-[14px] font-bold">{isTurnsDetails ? 'جزئیات نوبت ' : listTab[value]}</p>
             </Button>
             {isTurnsDetails ?
-                <IsTurnsDetails user={user} setIsTurnsDetails={setIsTurnsDetails} /> : (
+                <IsTurnsDetails loading={loading} user={user} setIsTurnsDetails={setIsTurnsDetails} /> : (
                     <>
                         <div className='!hidden md:!flex !w-full'>
                             <Tabs

components/dashboard/userAccount/tabs/comments/Comment.js

@@ -2,42 +2,60 @@ import CalndarD from "@/components/icons/CalndarD"
 import { Rating } from "@mui/material"
 import Image from "next/image"
 import ModalDeleteComment from "./modal"
+import CircularLoading from "@/app/component/loading/Circular"
+import TextLoading from "@/app/component/loading/Text"
+import CustomLoading from "@/app/component/loading/Custom"
+import MultilineLoading from "@/app/component/loading/Multiline"
 
-function Comment({ data }) {
+function Comment({ data, loading }) {
     return (
         <li className="flex flex-col gap-[8px] w-full">
             <div className="flex items-start justify-between w-full">
                 <div className="flex items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]">
-                    <Image
+                    <CircularLoading loading={loading} width={87} height={87}>
-                        className="w-[48px] sm:w-[61px] md:w-[75px] lg:w-[88px] h-[48px] sm:h-[61px] md:h-[75px] lg:h-[88px]"
+                        <Image
-                        src={data.profile}
+                            className="w-[48px] sm:w-[61px] md:w-[75px] lg:w-[88px] h-[48px] sm:h-[61px] md:h-[75px] lg:h-[88px]"
-                        alt="profile"
+                            src={data.profile}
-                        height={87}
+                            alt="profile"
-                        width={87}
+                            height={87}
-                    />
+                            width={87}
+                        />
+                    </CircularLoading>
                     <div className="flex flex-col items-start justify-center gap-[8px] md:gap-[12px] lg:gap-[16px]">
-                        <p className="text-[#3B3B3B] text-[12px] md:text-[14px] lg:text-[16px] font-bold">{data.name_doctor}</p>
+                        <TextLoading loading={loading} width={105} height={18}>
-                        <p className="text-[#525252] text-[12px] md:text-[14px] font-medium">تخصص: {data.expertise}</p>
+                            <p className="text-[#3B3B3B] text-[12px] md:text-[14px] lg:text-[16px] font-bold">{data.name_doctor}</p>
+                        </TextLoading>
+                        <TextLoading loading={loading} width={65} height={18}>
+                            <p className="text-[#525252] text-[12px] md:text-[14px] font-medium">تخصص: {data.expertise}</p>
+                        </TextLoading>
                     </div>
                 </div>
-                <ModalDeleteComment />
+                <CustomLoading loading={loading} width={90} height={30}>
+                    <ModalDeleteComment />
+                </CustomLoading>
             </div>
-            <Rating
+            <CustomLoading loading={loading} width={130} height={18}>
-                defaultValue={data.stars.value}
+                <Rating
-                className="!mt-[4px] md:!mt-[6px] lg:!mt-[8px]"
+                    defaultValue={data.stars.value}
-                sx={{
+                    className="!mt-[4px] md:!mt-[6px] lg:!mt-[8px]"
-                    '& .MuiSvgIcon-root': {
+                    sx={{
-                        width: '16px',
+                        '& .MuiSvgIcon-root': {
-                        height: '16px'
+                            width: '16px',
-                    }
+                            height: '16px'
-                }}
+                        }
-            />
+                    }}
-            <p className="text-[#525252] mt-[4px] md:mt-[2px] lg:mt-0 text-[14px] font-normal leading-[28px] md:leading-[30px] lg:leading-[33px]">{data.comment}</p>
+                />
+            </CustomLoading>
+            <MultilineLoading loading={loading} width='full' height={18} line={2}>
+                <p className="text-[#525252] mt-[4px] md:mt-[2px] lg:mt-0 text-[14px] font-normal leading-[28px] md:leading-[30px] lg:leading-[33px]">{data.comment}</p>
+            </MultilineLoading>
             <div className="flex items-center justify-start gap-[8px]">
                 <div className="w-[20px] h-[20px] sm:w-[22px] sm:h-[22px] lg:w-[24px] lg:h-[24px]">
                     <CalndarD />
                 </div>
-                <p className="text-[#7E7E7E] text-[12px] font-normal">{data.date}</p>
+                <TextLoading width={90} height={18} loading={loading}>
+                    <p className="text-[#7E7E7E] text-[12px] font-normal">{data.date}</p>
+                </TextLoading>
             </div>
             <span className="w-full block h-px bg-[#EFEFEF] mt-0 md:mt-[4px] mt-[8px]"></span>
         </li>

components/dashboard/userAccount/tabs/comments/index.js

@@ -1,12 +1,13 @@
 import Comment from "./Comment"
 
-function Comments({ user }) {
+function Comments({ user, loading }) {
     return (
         <ul className="flex opacity-page flex-col items-start justify-start gap-[24px] md:gap-[22px] lg:gap-[20px]">
             {user.comments.map((item, idx) => (
                 <Comment
                     key={idx}
                     data={item}
+                    loading={loading}
                 />
             ))}
         </ul>

components/dashboard/userAccount/tabs/messages/Message.js

@@ -1,23 +1,31 @@
+import MultilineLoading from '@/app/component/loading/Multiline'
+import TextLoading from '@/app/component/loading/Text'
 import CalndarD from '@/components/icons/CalndarD'
 import MessageNotifd from '@/components/icons/MessageNotifD'
 import React from 'react'
 
-function Message({ data }) {
+function Message({ data, loading }) {
     return (
         <li>
             <div className="flex items-center justify-start gap-[8px]">
                 <div className="p-[6px] rounded-full bg-[#F17732]">
                     <MessageNotifd />
                 </div>
-                <p className="text-[#3B3B3B] text-[12px] md:text-[14px] lg:text-[16px] font-bold">عنوان پیام</p>
+                <TextLoading width={60} height={18} loading={loading}>
+                    <p className="text-[#3B3B3B] text-[12px] md:text-[14px] lg:text-[16px] font-bold">عنوان پیام</p>
+                </TextLoading>
             </div>
             <div className='mr-0 lg:mr-[41px]'>
-                <p className='text-[#525252] text-[12px] md:text-[14px] font-normal leading-[28px] md:leading-[30px] lg:leading-[33px]'>{data.text}</p>
+                <MultilineLoading width='full' height={18} loading={loading} line={2}>
+                    <p className='text-[#525252] text-[12px] md:text-[14px] font-normal leading-[28px] md:leading-[30px] lg:leading-[33px]'>{data.text}</p>
+                </MultilineLoading>
                 <div className='flex items-center justify-start gap-[8px] mt-[8px] md:mt-[10px] lg:mt-[12px]'>
                     <div className='max-w-[20px] max-h-[20px] md:max-w-[22px] md:max-h-[22px] lg:max-w-[24px] lg:max-h-[24px]'>
                         <CalndarD />
                     </div>
-                    <p className='text-[#7E7E7E] text-[12px] font-normal'>{data.date}</p>
+                    <TextLoading width={60} height={18} loading={loading}>
+                        <p className='text-[#7E7E7E] text-[12px] font-normal'>{data.date}</p>
+                    </TextLoading>
                 </div>
             </div>
             <span className='block bg-[#EFEFEF] h-px w-full mt-[12px]'></span>

components/dashboard/userAccount/tabs/messages/index.js

@@ -1,12 +1,13 @@
 import Message from "./Message";
 
-function Messages({ user }) {
+function Messages({ user, loading }) {
     return (
         <ul className="flex opacity-page flex-col gap-[24px] md:gap-[20px] lg:gap-[16px]">
             {user.messages.map((item, idx) => (
                 <Message
                     key={idx}
                     data={item}
+                    loading={loading}
                 />
             ))}
         </ul>

components/dashboard/userAccount/tabs/transactions/Card.js

@@ -1,49 +1,73 @@
+import CircularLoading from "@/app/component/loading/Circular"
+import TextLoading from "@/app/component/loading/Text"
 import Image from "next/image"
 
-function Card({ data }) {
+function Card({ data, loading }) {
     return (
         <li className="p-[12px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] bg-[#FFF] rounded-[8px]">
             <div className="flex items-center justify-between w-full">
                 <div className="flex items-center justify-start gap-[8px]">
-                    <Image
+                    <CircularLoading width={32} height={32} loading={loading}>
-                        src={data.image}
+                        <Image
-                        alt="profile"
+                            src={data.image}
-                        height={32}
+                            alt="profile"
-                        width={32}
+                            height={32}
-                    />
+                            width={32}
-                    <p className="text-[#616161] text-[14px] font-medium">{data.name}</p>
+                        />
+                    </CircularLoading>
+                    <TextLoading width={90} height={18} loading={loading}>
+                        <p className="text-[#616161] text-[14px] font-medium">{data.name}</p>
+                    </TextLoading>
                 </div>
-                <div
+                <TextLoading loading={loading} width={95} height={25}>
-                    className={`
+                    <div
+                        className={`
                         w-[100px] p-[4px] rounded-[4px] text-center text-[14px] font-medium cursor-pointer select-none
                         ${data.status === 'success' ? 'bg-[#E8FADD] text-[#75E22E]' :
-                            data.status === 'pending' ? 'bg-[#FFF3DD] text-[#FDBA35]' : 'bg-[#FFE3E2] text-[#FF5450]'}
+                                data.status === 'pending' ? 'bg-[#FFF3DD] text-[#FDBA35]' : 'bg-[#FFE3E2] text-[#FF5450]'}
                     `}
-                    variant='text'
+                        variant='text'
-                >
+                    >
-                    {data.status === 'success' ? 'پرداخت شده' :
+                        {data.status === 'success' ? 'پرداخت شده' :
-                        data.status === 'pending' ? 'در انتظار' : 'پرداخت نشده'}
+                            data.status === 'pending' ? 'در انتظار' : 'پرداخت نشده'}
-                </div>
+                    </div>
+                </TextLoading>
             </div>
             <ul className="flex flex-col mt-[16px]">
                 <li className="flex items-center justify-between gap-[12px]">
-                    <p className="text-[#7E7E7E] text-[14px] font-normal">شناسه:</p>
+                    <TextLoading loading={loading} width={60} height={18}>
-                    <p className="text-[#616161] text-[14px] font-medium">{data.id}</p>
+                        <p className="text-[#7E7E7E] text-[14px] font-normal">شناسه:</p>
+                    </TextLoading>
+                    <TextLoading loading={loading} width={90} height={18}>
+                        <p className="text-[#616161] text-[14px] font-medium">{data.id}</p>
+                    </TextLoading>
                 </li>
                 <span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
                 <li className="flex items-center justify-between gap-[12px]">
-                    <p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
+                    <TextLoading loading={loading} width={90} height={18}>
-                    <p className="text-[#616161] text-[14px] font-medium">{data.date}</p>
+                        <p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
+                    </TextLoading>
+                    <TextLoading loading={loading} width={60} height={18}>
+                        <p className="text-[#616161] text-[14px] font-medium">{data.date}</p>
+                    </TextLoading>
                 </li>
                 <span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
                 <li className="flex items-center justify-between gap-[12px]">
-                    <p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
+                    <TextLoading loading={loading} width={80} height={18}>
-                    <p className="text-[#616161] text-[14px] font-medium">{data.time}</p>
+                        <p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
+                    </TextLoading>
+                    <TextLoading loading={loading} width={80} height={18}>
+                        <p className="text-[#616161] text-[14px] font-medium">{data.time}</p>
+                    </TextLoading>
                 </li>
                 <span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
                 <li className="flex items-center justify-between gap-[12px]">
-                    <p className="text-[#7E7E7E] text-[14px] font-normal">مبلغ پیش پرداخت:</p>
+                    <TextLoading loading={loading} width={110} height={18}>
-                    <p className="text-[#616161] text-[14px] font-medium">{data.amount} تومان</p>
+                        <p className="text-[#7E7E7E] text-[14px] font-normal">مبلغ پیش پرداخت:</p>
+                    </TextLoading>
+                    <TextLoading loading={loading} width={40} height={18}>
+                        <p className="text-[#616161] text-[14px] font-medium">{data.amount} تومان</p>
+                    </TextLoading>
                 </li>
             </ul>
         </li>

components/dashboard/userAccount/tabs/transactions/List.js

@@ -2,8 +2,11 @@ import CustomTable from "@/app/component/CustomTable";
 import { TableCell, TableRow } from "@mui/material";
 import Image from "next/image";
 import Card from "./Card";
+import TextLoading from "@/app/component/loading/Text";
+import CustomLoading from "@/app/component/loading/Custom";
+import CircularLoading from "@/app/component/loading/Circular";
 
-function List({ user }) {
+function List({ user, loading }) {
 
     const tableHead = ['ردیف', 'شناسه', 'نام پزشک', 'تاریخ', 'ساعت', 'مبلغ (تومان)', 'وضعیت']
     const centerTable = [0, 4, 5];
@@ -20,34 +23,60 @@ function List({ user }) {
                             key={idx}
                             className='!border-0 !border-b !border-[#DBDBDB]'
                         >
-                            <TableCell className='!pr-[18px] !text-nowrap' align="center">{idx + 1}</TableCell>
+                            <TableCell className='!pr-[18px] !text-nowrap' align="center">
-                            <TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">{row.id}</TableCell>
+                                <TextLoading width={15} height={18} loading={loading}>
+                                    {idx + 1}
+                                </TextLoading>
+                            </TableCell>
+                            <TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
+                                <TextLoading width={30} height={18} loading={loading}>
+                                    {row.id}
+                                </TextLoading>
+                            </TableCell>
                             <TableCell className='!pr-[18px] !text-nowrap' component="th" scope="row">
                                 <div className='flex items-center justify-start gap-[8px] !text-nowrap'>
-                                    <Image
+                                    <CircularLoading width={32} height={32} loading={loading}>
-                                        src={row.image}
+                                        <Image
-                                        alt='doctor'
+                                            src={row.image}
-                                        height={32}
+                                            alt='doctor'
-                                        width={32}
+                                            height={32}
-                                    />
+                                            width={32}
-                                    {row.name}
+                                        />
+                                    </CircularLoading>
+                                    <TextLoading width={40} height={18} loading={loading}>
+                                        {row.name}
+                                    </TextLoading>
                                 </div>
                             </TableCell>
-                            <TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">{row.date}</TableCell>
+                            <TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
-                            <TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">{row.time}</TableCell>
+                                <TextLoading width={50} height={18} loading={loading}>
-                            <TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">{row.amount}</TableCell>
+                                    {row.date}
+                                </TextLoading>
+                            </TableCell>
+                            <TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
+                                <TextLoading width={50} height={18} loading={loading}>
+                                    {row.time}
+                                </TextLoading>
+                            </TableCell>
+                            <TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
+                                <TextLoading width={50} height={18} loading={loading}>
+                                    {row.amount}
+                                </TextLoading>
+                            </TableCell>
                             <TableCell className='!pr-[18px] !text-nowrap' align="right">
-                                <div
+                                <CustomLoading width={80} height={22} loading={loading}>
-                                    className={`
+                                    <div
+                                        className={`
                                     w-[124px] py-[4px] px-[4px] rounded-[4px] text-center text-[16px] font-medium cursor-pointer select-none
                                     ${row.status === 'success' ? 'bg-[#E8FADD] text-[#75E22E]' :
-                                            row.status === 'pending' ? 'bg-[#FFF3DD] text-[#FDBA35]' : 'bg-[#FFE3E2] text-[#FF5450]'}
+                                                row.status === 'pending' ? 'bg-[#FFF3DD] text-[#FDBA35]' : 'bg-[#FFE3E2] text-[#FF5450]'}
                                 `}
-                                    variant='text'
+                                        variant='text'
-                                >
+                                    >
-                                    {row.status === 'success' ? 'پرداخت شده' :
+                                        {row.status === 'success' ? 'پرداخت شده' :
-                                        row.status === 'pending' ? 'در انتظار' : 'پرداخت نشده'}
+                                            row.status === 'pending' ? 'در انتظار' : 'پرداخت نشده'}
-                                </div>
+                                    </div>
+                                </CustomLoading>
                             </TableCell>
                         </TableRow>
                     ))}
@@ -58,6 +87,7 @@ function List({ user }) {
                     <Card
                         key={idx}
                         data={row}
+                        loading={loading}
                     />
                 ))}
             </ul>

components/dashboard/userAccount/tabs/transactions/index.js

@@ -1,10 +1,10 @@
 import List from "./List";
 
-function Transactions({ user }) {
+function Transactions({ user, loading }) {
     return (
         <div className="opacity-page">
             <p className="text-[#3B3B3B] hidden md:block text-[16px] font-bold">تاریخچه تراکنش ها</p>
-            <List user={user} />
+            <List user={user} loading={loading} />
         </div>
     )
 }

components/dashboard/userAccount/tabs/turns/Card.js

@@ -1,44 +1,64 @@
+import CircularLoading from "@/app/component/loading/Circular"
+import TextLoading from "@/app/component/loading/Text"
 import ArrowLeftCardD from "@/components/icons/ArrowLeftCardD"
 import { Button } from "@mui/material"
 import Image from "next/image"
 
-function Card({ data, setIsTurnsDetails }) {
+function Card({ data, loading, setIsTurnsDetails }) {
     return (
         <li
             className="shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] pb-[8px] bg-[#FFF] rounded-[8px]"
         >
             <div className="flex items-center justify-start gap-[8px] p-[12px]">
-                <Image
+                <CircularLoading width={32} height={32} loading={loading}>
-                    width={32}
+                    <Image
-                    height={32}
+                        width={32}
-                    alt="profile"
+                        height={32}
-                    src={data.image}
+                        alt="profile"
-                />
+                        src={data.image}
+                    />
+                </CircularLoading>
                 <div className="flex flex-col items-start justify-center gap-[8px]">
-                    <p className="text-[#616161] text-[14px] font-medium">{data.name}</p>
+                    <TextLoading loading={loading} width={65} height={18}>
-                    <p className="text-[#7E7E7E] text-[14px] font-normal">{data.expertise}</p>
+                        <p className="text-[#616161] text-[14px] font-medium">{data.name}</p>
+                    </TextLoading>
+                    <TextLoading loading={loading} width={50} height={18}>
+                        <p className="text-[#7E7E7E] text-[14px] font-normal">{data.expertise}</p>
+                    </TextLoading>
                 </div>
             </div>
             <ul className="w-full py-[8px] px-[12px] bg-[#FAFAFA] flex flex-col gap-[12px]">
                 <li className="flex items-center justify-between">
-                    <p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
+                    <TextLoading loading={loading} width={75} height={18}>
-                    <p className="text-[#525252] text-[14px] font-medium">{data.date}</p>
+                        <p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
+                    </TextLoading>
+                    <TextLoading loading={loading} width={110} height={18}>
+                        <p className="text-[#525252] text-[14px] font-medium">{data.date}</p>
+                    </TextLoading>
                 </li>
                 <li className="flex items-center justify-between">
-                    <p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
+                    <TextLoading loading={loading} width={65} height={18}>
-                    <p className="text-[#525252] text-[14px] font-medium">{data.time}</p>
+                        <p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
+                    </TextLoading>
+                    <TextLoading loading={loading} width={60} height={18}>
+                        <p className="text-[#525252] text-[14px] font-medium">{data.time}</p>
+                    </TextLoading>
                 </li>
             </ul>
             <div className="mt-[12px] flex items-center justify-between px-[12px]">
-                <p className="text-[#7E7E7E] text-[12px] font-normal">مبلغ پیش پرداخت: {data.amount} تومان</p>
+                <TextLoading loading={loading} width={120} height={18}>
-                <Button
+                    <p className="text-[#7E7E7E] text-[12px] font-normal">مبلغ پیش پرداخت: {data.amount} تومان</p>
-                    className="!flex !p-1 !items-center !justify-end !gap-[2px]"
+                </TextLoading>
-                    onClick={() => setIsTurnsDetails(true)}
+                <TextLoading loading={loading} width={80} height={25}>
-                    variant="text"
+                    <Button
-                >
+                        className="!flex !p-1 !items-center !justify-end !gap-[2px]"
-                    مشاهده
+                        onClick={() => setIsTurnsDetails(true)}
-                    <ArrowLeftCardD />
+                        variant="text"
-                </Button>
+                    >
+                        مشاهده
+                        <ArrowLeftCardD />
+                    </Button>
+                </TextLoading>
             </div>
         </li>
     )

components/dashboard/userAccount/tabs/turns/List.js

@@ -3,13 +3,15 @@ import ArrowLeftBlueD from '@/components/icons/ArrowLeftBlueD'
 import { Button, TableCell, TableRow } from '@mui/material'
 import Image from 'next/image'
 import Card from './Card';
+import CircularLoading from '@/app/component/loading/Circular';
+import TextLoading from '@/app/component/loading/Text';
+import CustomLoading from '@/app/component/loading/Custom';
 
-function List({ user, setIsTurnsDetails }) {
+function List({ user, loading, setIsTurnsDetails }) {
 
     const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'مبلغ (تومان)', 'عملیات']
     const centerTable = [0, 5];
 
-
     return (
         <div className='!mt-[24px]'>
             <div className='hidden lg:block'>
@@ -22,31 +24,57 @@ function List({ user, setIsTurnsDetails }) {
                             key={idx}
                             className='!border-0 !border-b !border-[#DBDBDB]'
                         >
-                            <TableCell className='!pr-[18px] !text-nowrap' align="center">{idx + 1}</TableCell>
+                            <TableCell className='!pr-[18px] !text-nowrap' align="center">
+                                <TextLoading width={15} height={18} loading={loading}>
+                                    {idx + 1}
+                                </TextLoading>
+                            </TableCell>
                             <TableCell className='!pr-[18px] !text-nowrap' component="th" scope="row">
                                 <div className='flex items-center justify-start gap-[8px] !text-nowrap'>
-                                    <Image
+                                    <CircularLoading width={32} height={32} loading={loading}>
-                                        src={row.image}
+                                        <Image
-                                        alt='doctor'
+                                            src={row.image}
-                                        height={32}
+                                            alt='doctor'
-                                        width={32}
+                                            height={32}
-                                    />
+                                            width={32}
-                                    {row.name}
+                                        />
+                                    </CircularLoading>
+                                    <TextLoading width={40} height={18} loading={loading}>
+                                        {row.name}
+                                    </TextLoading>
                                 </div>
                             </TableCell>
-                            <TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">{row.expertise}</TableCell>
+                            <TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
-                            <TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">{row.date}</TableCell>
+                                <TextLoading width={50} height={18} loading={loading}>
-                            <TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">{row.time}</TableCell>
+                                    {row.expertise}
-                            <TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">{row.amount}</TableCell>
+                                </TextLoading>
+                            </TableCell>
+                            <TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
+                                <TextLoading width={50} height={18} loading={loading}>
+                                    {row.date}
+                                </TextLoading>
+                            </TableCell>
+                            <TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
+                                <TextLoading width={50} height={18} loading={loading}>
+                                    {row.time}
+                                </TextLoading>
+                            </TableCell>
+                            <TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
+                                <TextLoading width={50} height={18} loading={loading}>
+                                    {row.amount}
+                                </TextLoading>
+                            </TableCell>
                             <TableCell className='!pr-[18px] !text-nowrap' align="right">
-                                <Button
+                                <CustomLoading width={80} height={22} loading={loading}>
-                                    className='!flex !p-1 !items-center !justify-start !gap-[4px] !text-[14px] !font-bold !text-[#5559CE]'
+                                    <Button
-                                    onClick={() => setIsTurnsDetails(true)}
+                                        className='!flex !p-1 !items-center !justify-start !gap-[4px] !text-[14px] !font-bold !text-[#5559CE]'
-                                    variant='text'
+                                        onClick={() => setIsTurnsDetails(true)}
-                                >
+                                        variant='text'
-                                    مشاهده جزئیات
+                                    >
-                                    <ArrowLeftBlueD />
+                                        مشاهده جزئیات
-                                </Button>
+                                        <ArrowLeftBlueD />
+                                    </Button>
+                                </CustomLoading>
                             </TableCell>
                         </TableRow>
                     ))}
@@ -57,6 +85,7 @@ function List({ user, setIsTurnsDetails }) {
                     <Card
                         key={idx}
                         data={item}
+                        loading={loading}
                         setIsTurnsDetails={setIsTurnsDetails}
                     />
                 ))}

components/dashboard/userAccount/tabs/turns/index.js

@@ -2,7 +2,7 @@ import { useState } from "react";
 import Head from "./Head";
 import List from "./List";
 
-function Turns({ user, setIsTurnsDetails }) {
+function Turns({ user, setIsTurnsDetails, loading }) {
 
     const [value, setValue] = useState(0);
     const handleChange = (event, newValue) => setValue(newValue);
@@ -15,7 +15,7 @@ function Turns({ user, setIsTurnsDetails }) {
                 setValue={setValue}
                 handleChange={handleChange}
             />
-            <List user={user} setIsTurnsDetails={setIsTurnsDetails} />
+            <List user={user} loading={loading} setIsTurnsDetails={setIsTurnsDetails} />
         </div>
     )
 }

components/dashboard/userAccount/tabs/turns/isTurnsDetails/ButtonData.js

@@ -3,12 +3,13 @@ import ModalDeleteComment from "./modal"
 import EditTurnsD from "@/components/icons/EditTurnsD"
 import ArrowLeftD from "@/components/icons/ArrowLeftD"
 
-function ButtonData() {
+function ButtonData({ loading }) {
     return (
         <div className="flex mt-[48px] md:mt-0 items-center justify-center md:justify-end gap-[16px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
-            <ModalDeleteComment />
+            <ModalDeleteComment loading={loading} />
             <Button
                 className="!rounded-[4px] !shadow-none !gap-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]"
+                disabled={loading}
                 variant="contained"
             >
                 <EditTurnsD />

components/dashboard/userAccount/tabs/turns/isTurnsDetails/DetailLg.js

@@ -1,3 +1,5 @@
+import CircularLoading from '@/app/component/loading/Circular';
+import TextLoading from '@/app/component/loading/Text';
 import CalendarD from '@/components/icons/CalendarD';
 import CallD from '@/components/icons/CallD';
 import ClockClinic from '@/components/icons/ClockClinic';
@@ -8,57 +10,75 @@ import { Button } from '@mui/material';
 import Image from 'next/image'
 import React from 'react'
 
-function DetailLg({ user }) {
+function DetailLg({ user, loading }) {
 
     const data = user.turns[1];
 
     return (
         <div className='lg:mt-[18px] hidden md:block'>
             <div className='flex md:mt-[24px] lg:mt-0 items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]'>
-                <Image
+                <CircularLoading width={95} height={95} loading={loading}>
-                    width={95}
+                    <Image
-                    height={95}
+                        width={95}
-                    alt='profile'
+                        height={95}
-                    src={data.image}
+                        alt='profile'
-                    className='w-[32px] h-[32px] sm:w-[53px] sm:h-[53px] md:w-[74px] md:h-[74px] lg:w-[95px] lg:h-[95px]'
+                        src={data.image}
-                />
+                        className='w-[32px] h-[32px] sm:w-[53px] sm:h-[53px] md:w-[74px] md:h-[74px] lg:w-[95px] lg:h-[95px]'
+                    />
+                </CircularLoading>
                 <div className='flex flex-col items-start justify-center gap-[20px]'>
-                    <p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>{data.name}</p>
+                    <TextLoading loading={loading} width={70} height={18}>
-                    <p className='text-[#616161] text-[14px] md:text-[15px] lg:text-[16px] font-medium'>تخصص: {data.expertise}</p>
+                        <p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>{data.name}</p>
+                    </TextLoading>
+                    <TextLoading loading={loading} width={80} height={18}>
+                        <p className='text-[#616161] text-[14px] md:text-[15px] lg:text-[16px] font-medium'>تخصص: {data.expertise}</p>
+                    </TextLoading>
                 </div>
             </div>
             <ul className='flex mt-[16px] sm:mt-[21px] md:mt-[27px] lg:mt-[32px] mb-[24px] flex-col gap-[24px] items-start justify-start'>
                 <li className='flex items-center justify-start flex-wrap gap-[16px] lg:gap-[56px]'>
-                    <div className='flex items-start justify-start gap-[4px]'>
+                    <TextLoading loading={loading} width={100} height={20}>
-                        <CalendarD />
+                        <div className='flex items-start justify-start gap-[4px]'>
-                        <p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>تاریخ نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.date_turn}</span></p>
+                            <CalendarD />
-                    </div>
+                            <p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>تاریخ نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.date_turn}</span></p>
-                    <div className='flex items-start justify-start gap-[4px]'>
+                        </div>
-                        <ClockClinic />
+                    </TextLoading>
-                        <p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>زمان نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>ساعت {data.time}</span></p>
+                    <TextLoading loading={loading} width={100} height={20}>
-                    </div>
+                        <div className='flex items-start justify-start gap-[4px]'>
+                            <ClockClinic />
+                            <p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>زمان نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>ساعت {data.time}</span></p>
+                        </div>
+                    </TextLoading>
                 </li>
                 <li className='flex flex-wrap items-center justify-start gap-y-[12px] gap-[32px]'>
-                    <div className='flex items-start justify-start gap-[4px]'>
+                    <TextLoading loading={loading} width={250} height={20}>
-                        <LocationClinic />
+                        <div className='flex items-start justify-start gap-[4px]'>
-                        <p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>آدرس: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.location}</span></p>
+                            <LocationClinic />
-                    </div>
+                            <p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>آدرس: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.location}</span></p>
-                    <Button
+                        </div>
-                        className='!py-[8px] !px-[12px] !gap-[8px]'
+                    </TextLoading>
-                        variant='text'
+                    <TextLoading loading={loading} width={120} height={30}>
-                    >
+                        <Button
-                        <RoutingC />
+                            className='!py-[8px] !px-[12px] !gap-[8px]'
-                        <p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
+                            variant='text'
-                    </Button>
+                        >
-                </li>
+                            <RoutingC />
-                <li className='flex items-center justify-start gap-[4px]'>
+                            <p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
-                    <CallD />
+                        </Button>
-                    <p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>تلفن: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.phone}</span></p>
+                    </TextLoading>
                 </li>
+                <TextLoading loading={loading} width={120} height={18}>
+                    <li className='flex items-center justify-start gap-[4px]'>
+                        <CallD />
+                        <p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>تلفن: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.phone}</span></p>
+                    </li>
+                </TextLoading>
             </ul>
             <div className='py-[9px] lg:py-[18px] px-[12px] lg:pr-[16px] lg:pl-[40px] flex items-center gap-[4px] border border-solid border-[#EFEFEF] rounded-[4px] w-fit'>
-                <TicketD />
+                <TextLoading loading={loading} width={150} height={18}>
-                <p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
+                    <TicketD />
+                    <p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
+                </TextLoading>
             </div>
         </div>
     )

components/dashboard/userAccount/tabs/turns/isTurnsDetails/DetailSm.js

@@ -4,57 +4,83 @@ import { Button } from '@mui/material';
 import Image from 'next/image'
 import React from 'react'
 import ButtonData from './ButtonData';
+import CircularLoading from '@/app/component/loading/Circular';
+import TextLoading from '@/app/component/loading/Text';
 
-function DetailSm({ user }) {
+function DetailSm({ user, loading }) {
 
     const data = user.turns[1];
 
     return (
         <div className='mt-[20px] block md:hidden'>
             <div className='flex items-center justify-start gap-[8px]'>
-                <Image
+                <CircularLoading width={32} height={32} loading={loading}>
-                    src={data.image}
+                    <Image
-                    alt='profile'
+                        src={data.image}
-                    height={32}
+                        alt='profile'
-                    width={32}
+                        height={32}
-                />
+                        width={32}
+                    />
+                </CircularLoading>
                 <div className='flex flex-col justify-center items-start gap-[8px]'>
-                    <p className='text-[#616161] text-[14px] font-medium'>{data.name}</p>
+                    <TextLoading loading={loading} width={60} height={14}>
-                    <p className='text-[#7E7E7E] text-[14px] font-normal'>{data.expertise}</p>
+                        <p className='text-[#616161] text-[14px] font-medium'>{data.name}</p>
+                    </TextLoading>
+                    <TextLoading loading={loading} width={70} height={14}>
+                        <p className='text-[#7E7E7E] text-[14px] font-normal'>{data.expertise}</p>
+                    </TextLoading>
                 </div>
             </div>
             <ul className='flex w-full flex-col items-start justify-start mt-[16px]'>
                 <li className="flex items-center w-full justify-between">
-                    <p className="text-[#7E7E7E] text-[16px] font-normal">تاریخ نوبت:</p>
+                    <TextLoading loading={loading} width={70} height={16}>
-                    <p className="text-[#525252] text-[16px] font-medium">{data.date}</p>
+                        <p className="text-[#7E7E7E] text-[16px] font-normal">تاریخ نوبت:</p>
+                    </TextLoading>
+                    <TextLoading loading={loading} width={55} height={16}>
+                        <p className="text-[#525252] text-[16px] font-medium">{data.date}</p>
+                    </TextLoading>
                 </li>
                 <span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
                 <li className="flex flex-wrap items-center w-full justify-between">
-                    <p className="text-[#7E7E7E] text-[16px] font-normal">ساعت نوبت:</p>
+                    <TextLoading loading={loading} width={80} height={16}>
-                    <p className="text-[#525252] text-[16px] font-medium">{data.time}</p>
+                        <p className="text-[#7E7E7E] text-[16px] font-normal">ساعت نوبت:</p>
+                    </TextLoading>
+                    <TextLoading loading={loading} width={60} height={16}>
+                        <p className="text-[#525252] text-[16px] font-medium">{data.time}</p>
+                    </TextLoading>
                 </li>
                 <span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
-                <li className="flex flex-wrap gap-y-[12px] items-center w-full justify-between">
+                <li className="flex flex-wrap gap-x-[12px] gap-y-[12px] items-center w-full justify-between">
-                    <p className="text-[#7E7E7E] text-[14px] font-normal">آدرس:<span className='text-[#616161]'>{data.location}</span></p>
+                    <TextLoading loading={loading} width={200} height={16}>
-                    <Button
+                        <p className="text-[#7E7E7E] text-[14px] font-normal">آدرس:<span className='text-[#616161]'>{data.location}</span></p>
-                        className='!py-[8px] !border-[#EFEFEF] !px-[12px] !gap-[8px]'
+                    </TextLoading>
-                        variant='outlined'
+                    <TextLoading loading={loading} width={130} height={40}>
-                    >
+                        <Button
-                        <RoutingC />
+                            className='!py-[8px] !border-[#EFEFEF] !px-[12px] !gap-[8px]'
-                        <p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
+                            variant='outlined'
-                    </Button>
+                        >
+                            <RoutingC />
+                            <p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
+                        </Button>
+                    </TextLoading>
                 </li>
-                <p className='text-[#7E7E7E] text-[14px] font-normal mt-[12px]'>تلفن: <span className='text-[#616161]'>{data.phone}</span></p>
+                <TextLoading loading={loading} width={100} height={18}>
+                    <p className='text-[#7E7E7E] text-[14px] font-normal mt-[12px]'>تلفن: <span className='text-[#616161]'>{data.phone}</span></p>
+                </TextLoading>
                 <span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
                 <li className='flex items-center justify-between w-full'>
-                    <div className='flex items-center gap-[4px] w-fit'>
+                    <TextLoading loading={loading} width={120} height={18}>
-                        <TicketD />
+                        <div className='flex items-center gap-[4px] w-fit'>
-                        <p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
+                            <TicketD />
-                    </div>
+                            <p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
-                    <p className='text-[#616161] text-[14px] font-bold'>{data.amount_paid} تومان</p>
+                        </div>
+                    </TextLoading>
+                    <TextLoading loading={loading} width={60} height={18}>
+                        <p className='text-[#616161] text-[14px] font-bold'>{data.amount_paid} تومان</p>
+                    </TextLoading>
                 </li>
             </ul>
-            <ButtonData />
+            <ButtonData loading={loading} />
         </div>
     )
 }

components/dashboard/userAccount/tabs/turns/isTurnsDetails/Head.js

@@ -1,8 +1,9 @@
 import ArrowRightS from "@/components/icons/ArrowRightS";
 import { Button } from "@mui/material";
 import ButtonData from "./ButtonData";
+import TextLoading from "@/app/component/loading/Text";
 
-function Head({ user, setIsTurnsDetails }) {
+function Head({ user, setIsTurnsDetails, loading }) {
     return (
         <div className="hidden md:flex flex-wrap gap-x-[24px] gap-y-[12px] items-center justify-between">
             <div className="flex items-center justify-start gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
@@ -12,9 +13,11 @@ function Head({ user, setIsTurnsDetails }) {
                 >
                     <ArrowRightS />
                 </Button>
-                <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">جزئیات نوبت شما</p>
+                <TextLoading width={70} height={20} loading={loading}>
+                    <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">جزئیات نوبت شما</p>
+                </TextLoading>
             </div>
-            <ButtonData />
+            <ButtonData loading={loading} />
         </div>
     )
 }

components/dashboard/userAccount/tabs/turns/isTurnsDetails/index.js

@@ -3,15 +3,16 @@ import DetailLg from "./DetailLg"
 import DetailSm from "./DetailSm"
 import Head from "./Head"
 
-function IsTurnsDetails({ user, setIsTurnsDetails }) {
+function IsTurnsDetails({ user, setIsTurnsDetails, loading }) {
     return (
         <div className="md:py-[20px] md:px-[24px] opacity-page">
             <Head
                 user={user}
+                loading={loading}
                 setIsTurnsDetails={setIsTurnsDetails}
             />
-            <DetailLg user={user} />
+            <DetailLg user={user} loading={loading} />
-            <DetailSm user={user} />
+            <DetailSm user={user} loading={loading} />
         </div>
     )
 }

components/dashboard/userAccount/tabs/turns/isTurnsDetails/modal/index.js

@@ -3,7 +3,7 @@ import { Box, Button, Modal } from '@mui/material';
 import { styleDefault } from '@/mui';
 import CloseModalD from '@/components/icons/CloseModalD';
 
-function ModalDeleteComment() {
+function ModalDeleteComment({ loading }) {
 
     const [open, setOpen] = useState(false);
     const handleOpen = () => setOpen(true);
@@ -13,7 +13,11 @@ function ModalDeleteComment() {
         <div>
             {/* Button Modal */}
             <Button
-                className="!rounded-[4px] !border-[#828DE0] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]"
+                className={`
+                    ${!loading && '!border-[#828DE0]'} 
+                    !rounded-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]
+                `}
+                disabled={loading}
                 onClick={handleOpen}
                 variant="outlined"
             >

components/doctor/appointmentList/ItemAppointment.js

@@ -1,3 +1,5 @@
+import CircularLoading from '@/app/component/loading/Circular'
+import TextLoading from '@/app/component/loading/Text'
 import ArrowLeftD from '@/components/icons/ArrowLeftD'
 import GreenCalendarTurn from '@/components/icons/GreenCalendarTurn'
 import { Button } from '@mui/material'
@@ -5,7 +7,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
 
-function ItemAppointment({ turn, doctor }) {
+function ItemAppointment({ turn, doctor, loading }) {
     return (
         <li
             key={turn.id}
@@ -14,26 +16,35 @@ function ItemAppointment({ turn, doctor }) {
             <p className='text-[#3B3B3B] text-[20px] font-bold'>نوبت دهی</p>
             <span className='block w-full h-px bg-[#EFEFEF] my-4'></span>
             <div className='flex items-center justify-start gap-3'>
-                <Image
+                <CircularLoading width={56} height={56} loading={loading}>
-                    src={doctor.img}
+                    <Image
-                    width={56}
+                        src={doctor.img}
-                    height={56}
+                        width={56}
-                    alt='doctor'
+                        height={56}
-                />
+                        alt='doctor'
+                    />
+                </CircularLoading>
                 <div className='flex flex-col items-start justify-center gap-2'>
-                    <p className='text-[#3B3B3B] text-[14px] font-bold'>{doctor.name}</p>
+                    <TextLoading width={60} height={15} loading={loading}>
-                    <p className="text-[#525252] text-[14px] font-medium">تخصص: {doctor.expertise}</p>
+                        <p className='text-[#3B3B3B] text-[14px] font-bold'>{doctor.name}</p>
+                    </TextLoading>
+                    <TextLoading width={65} height={15} loading={loading}>
+                        <p className="text-[#525252] text-[14px] font-medium">تخصص: {doctor.expertise}</p>
+                    </TextLoading>
                 </div>
             </div>
             <div className='flex mt-5 gap-2 items-center justify-between'>
                 <div className='flex items-start justify-start gap-1'>
                     <GreenCalendarTurn />
-                    <p className='text-[#05BA58] text-[12px] font-medium'>اولین نوبت آزاد: {turn.first_free_turn}</p>
+                    <TextLoading width={100} height={15} loading={loading}>
+                        <p className='text-[#05BA58] text-[12px] font-medium'>اولین نوبت آزاد: {turn.first_free_turn}</p>
+                    </TextLoading>
                 </div>
-                <Link href={`/booking/${turn.id}`}>
+                <Link href={loading ? '#' : `/booking/${turn.id}`}>
                     <Button
                         variant='contained'
                         className='!py-2 !px-3 xl:!px-6 gap-1'
+                        disabled={loading}
                     >
                         دریافت نوبت
                         <div className='w-[20px] h-[20px]'>

components/doctor/appointmentList/index.js

@@ -6,7 +6,7 @@ import ItemAppointment from './ItemAppointment';
 import ArrowLeftD from '@/components/icons/ArrowLeftD';
 import Link from 'next/link';
 
-function AppointmentList({ doctor }) {
+function AppointmentList({ doctor, loading }) {
 
     const itemActive = turns[0];
 
@@ -18,6 +18,7 @@ function AppointmentList({ doctor }) {
                         turn={item}
                         key={item.id}
                         doctor={doctor}
+                        loading={loading}
                     />
                 ))}
             </ul>

components/doctor/detailDoctor/Title.js

@@ -1,43 +1,58 @@
+import CircularLoading from "@/app/component/loading/Circular"
+import CustomLoading from "@/app/component/loading/Custom"
+import TextLoading from "@/app/component/loading/Text"
 import LikeDI from "@/components/icons/LikeDI"
 import StarDI from "@/components/icons/StarDI"
 import TickCircle from "@/components/icons/TickCircle"
 import Image from "next/image"
 
-function Title({ doctor }) {
+function Title({ doctor, loading }) {
     return (
         <div className="flex flex-col lg:flex-row items-center justify-start gap-[8px] lg:gap-[32px]">
-            <Image
+            <CircularLoading loading={loading} width={100} height={100}>
-                className="
+                <Image
+                    className="
                     w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px]
                     h-[40px] sm:h-[81px] md:h-[123px] lg:h-[164px]
                 "
-                src={doctor.img}
+                    src={doctor.img}
-                alt="img-doctor"
+                    alt="img-doctor"
-                height={164}
+                    height={164}
-                width={164}
+                    width={164}
-            />
+                />
+            </CircularLoading>
             <div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">
-                <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">{doctor.name}</p>
+                <TextLoading loading={loading} width={90} height={20}>
-                <p className="text-[#525252] text-[14px] md:text-[16px] font-medium">تخصص: {doctor.expertise}</p>
+                    <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">{doctor.name}</p>
+                </TextLoading>
+                <TextLoading loading={loading} width={100} height={20}>
+                    <p className="text-[#525252] text-[14px] md:text-[16px] font-medium">تخصص: {doctor.expertise}</p>
+                </TextLoading>
                 <div className="flex items-center justify-start gap-11">
-                    <p className="text-[#525252] text-[16px] font-medium">{doctor.experience} سال تجربه</p>
+                    <TextLoading loading={loading} width={60} height={20}>
+                        <p className="text-[#525252] text-[16px] font-medium">{doctor.experience} سال تجربه</p>
+                    </TextLoading>
                     <div className="flex items-center gap-1">
                         <div className="hidden lg:flex">
                             <TickCircle />
                         </div>
-                        <p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-medium">کد نظام پزشکی: {doctor.medical_system_code}</p>
+                        <TextLoading loading={loading} width={120} height={20}>
+                            <p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-medium">کد نظام پزشکی: {doctor.medical_system_code}</p>
+                        </TextLoading>
                     </div>
                 </div>
-                <div className="flex items-center justify-start gap-2">
+                <CustomLoading loading={loading} width={160} height={25}>
-                    <div className="flex p-1 gap-0.5 items-start justify-center">
+                    <div className="flex items-center justify-start gap-2">
-                        <StarDI />
+                        <div className="flex p-1 gap-0.5 items-start justify-center">
-                        <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">امتیاز: {doctor.point}</p>
+                            <StarDI />
+                            <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">امتیاز: {doctor.point}</p>
+                        </div>
+                        <div className="flex p-1 items-start gap-0.5">
+                            <LikeDI />
+                            <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
+                        </div>
                     </div>
-                    <div className="flex p-1 items-start gap-0.5">
+                </CustomLoading>
-                        <LikeDI />
-                        <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
-                    </div>
-                </div>
             </div>
         </div>
     )

components/doctor/detailDoctor/cards/AboutDcotor.js

@@ -2,8 +2,10 @@
 
 import { useState } from "react";
 import { Button } from "@mui/material"
+import MultilineLoading from "@/app/component/loading/Multiline";
+import TextLoading from "@/app/component/loading/Text";
 
-function AboutDcotor({ doctor }) {
+function AboutDcotor({ doctor, loading }) {
 
     const [isMore, setIsMore] = useState(false);
 
@@ -14,24 +16,26 @@ function AboutDcotor({ doctor }) {
                 className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
             ></a>
             <div className="flex flex-col items-center justify-center">
-                <p
+                <MultilineLoading loading={loading} width='full' height={18} line={30}>
-                    className={`
+                    <p
+                        className={`
                         text-[#616161] text-[14px] font-normal text-justify overflow-hidden relative
                         md:max-h-fit after:absolute after:right-0 after:bottom-0 leading-[28px] sm:leading-[30px] md:leading-[32px] lg:leading-[33px] after:h-[80px]
                         after:shadow-xl after:w-full transition-all duration-500 md:after:!bg-[linear-gradient(transparent,transparent)]
                         ${isMore ?
-                            'after:bg-transparent max-h-screen' :
+                                'after:bg-transparent max-h-screen' :
-                            'after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]'
+                                'after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]'
-                        }
+                            }
                     `}
-                >{doctor.detail}</p>
+                    >{doctor.detail}</p>
-                <Button
+                    <Button
-                    className="!text-[#F17732] md:!hidden !text-[14px] !font-light !p-2"
+                        className="!text-[#F17732] md:!hidden !text-[14px] !font-light !p-2"
-                    onClick={() => setIsMore(!isMore)}
+                        onClick={() => setIsMore(!isMore)}
-                    variant="text"
+                        variant="text"
-                >
+                    >
-                    {isMore ? 'مطالعه کمتر' : 'مطالعه بیشتر'}
+                        {isMore ? 'مطالعه کمتر' : 'مطالعه بیشتر'}
-                </Button>
+                    </Button>
+                </MultilineLoading>
             </div>
             <div className="mt-[12px] lg:mt-[8px] mb-6 md:mb-7 lg:mb-8">
                 <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">تخصص ها</p>
@@ -39,7 +43,9 @@ function AboutDcotor({ doctor }) {
                     {doctor.specialties.map((item, idx) => (
                         <li key={idx} className="flex items-center justify-start gap-1">
                             <span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
-                            <p className="text-[#616161] text-[16px] font-normal text-nowrap">{item}</p>
+                            <TextLoading loading={loading} width={70} height={18}>
+                                <p className="text-[#616161] text-[16px] font-normal text-nowrap">{item}</p>
+                            </TextLoading>
                         </li>
                     ))}
                 </ul>

components/doctor/detailDoctor/cards/comments/chart/ProgressAll.js

@@ -1,30 +1,33 @@
+import CircularLoading from "@/app/component/loading/Circular"
 import { numberToArStyle } from "@/helper"
 import { CircularProgress } from "@mui/material"
 
-function ProgressAll({ doctor }) {
+function ProgressAll({ doctor, loading }) {
     return (
         <div className="hidden lg:flex w-full h-fit relative min-w-[145px] max-w-[150px]">
-            <CircularProgress
+            <CircularLoading loading={loading} width={120} height={120}>
-                variant="determinate"
+                <CircularProgress
-                value={doctor.total_user_satisfaction}
+                    variant="determinate"
-                sx={{
+                    value={doctor.total_user_satisfaction}
-                    '& .MuiCircularProgress-circle': {
+                    sx={{
-                        stroke: '#05BA58',
+                        '& .MuiCircularProgress-circle': {
-                        strokeLinecap: 'round'
+                            stroke: '#05BA58',
-                    },
+                            strokeLinecap: 'round'
-                    '& .MuiCircularProgress-svg': {
+                        },
-                        borderRadius: '50%',
+                        '& .MuiCircularProgress-svg': {
-                        boxShadow: 'inset 0 0 0 11px #D7D7D7'
+                            borderRadius: '50%',
-                    }
+                            boxShadow: 'inset 0 0 0 11px #D7D7D7'
-                }}
+                        }
-                className="!w-full !h-full"
+                    }}
-            />
+                    className="!w-full !h-full"
-            <div
+                />
-                className="flex flex-col justify-center items-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 gap-1"
+                <div
-            >
+                    className="flex flex-col justify-center items-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 gap-1"
-                <p className="text-[#525252] text-[12px] font-normal text-center">مجموع<br />رضایت کاربران</p>
+                >
-                <p>{numberToArStyle(doctor.total_user_satisfaction)}%</p>
+                    <p className="text-[#525252] text-[12px] font-normal text-center">مجموع<br />رضایت کاربران</p>
-            </div>
+                    <p>{numberToArStyle(doctor.total_user_satisfaction)}%</p>
+                </div>
+            </CircularLoading>
         </div>
     )
 }

components/doctor/detailDoctor/cards/comments/chart/index.js

@@ -3,44 +3,57 @@ import ProgressAll from "./ProgressAll"
 import StarDI from "@/components/icons/StarDI"
 import LikeDI from "@/components/icons/LikeDI"
 import ProgressDetail from "@/app/component/ProfressDetail"
+import TextLoading from "@/app/component/loading/Text"
+import CustomLoading from "@/app/component/loading/Custom"
+import CircularLoading from "@/app/component/loading/Circular"
 
-function Chart({ doctor }) {
+function Chart({ doctor, loading }) {
     return (
         <div className='
             rounded-lg my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] border border-[#EFEFEF] bg-[#FFF] 
             pt-[12px] md:pt-[14px] lg:pt-[16px] pb-[12px] sm:pb-[16px] md:pb-[20px] lg:pb-[24px] px-[12px] sm:px-[16px] md:px-[20px] lg:px-[24px]
         '>
-            <div className='flex items-center justify-start gap-2.5'>
+            <TextLoading loading={loading} width={130} height={20}>
-                <p className="text-[#616161] text-[14px] font-medium">امتیاز کلی کاربران: {doctor.overall_score} از 5</p>
+                <div className='flex items-center justify-start gap-2.5'>
-                <p className="text-[#7E7E7E] text-[14px] font-normal">(از مجموع {doctor.comments.length} نظر)</p>
+                    <p className="text-[#616161] text-[14px] font-medium">امتیاز کلی کاربران: {doctor.overall_score} از 5</p>
+                    <p className="text-[#7E7E7E] text-[14px] font-normal">(از مجموع {doctor.comments.length} نظر)</p>
+                </div>
+            </TextLoading>
+            <div className={`${loading ? 'mt-4 mb-6' : 'mt-0 mb-0'} hidden md:flex`}>
+                <TextLoading loading={loading} width={160} height={20}>
+                    <Rating
+                        readOnly
+                        value={4}
+                        size="small"
+                        name="read-only"
+                        className="!mt-4 !mb-6 !hidden lg:!flex"
+                    />
+                </TextLoading>
             </div>
-            <Rating
+            <div className="flex items-center justify-start gap-2 my-[12px] md:hidden">
-                readOnly
+                <CustomLoading loading={loading} width={130} height={30}>
-                value={4}
+                    <div className="flex p-1 gap-0.5 items-start justify-center">
-                size="small"
+                        <StarDI />
-                name="read-only"
+                        <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">امتیاز: {doctor.point}</p>
-                className="!mt-4 !mb-6 !hidden lg:!flex"
+                    </div>
-            />
+                    <div className="flex p-1 items-start gap-0.5">
-            <div className="flex items-center justify-start gap-2 my-[12px]">
+                        <LikeDI />
-                <div className="flex p-1 gap-0.5 items-start justify-center">
+                        <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
-                    <StarDI />
+                    </div>
-                    <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">امتیاز: {doctor.point}</p>
+                </CustomLoading>
-                </div>
-                <div className="flex p-1 items-start gap-0.5">
-                    <LikeDI />
-                    <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
-                </div>
             </div>
             <div className="flex flex-wrap items-center justify-center gap-[50px]">
-                <ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
+                <ul className={`flex w-full flex-col items-start justify-start gap-1.5 ${loading ? 'lg:w-full' : 'lg:w-fit'}`}>
                     {doctor.progress_detail.map((item, idx) => (
-                        <ProgressDetail
+                        <TextLoading width='full' height={20} loading={loading}>
-                            data={item}
+                            <ProgressDetail
-                            key={idx}
+                                data={item}
-                        />
+                                key={idx}
+                            />
+                        </TextLoading>
                     ))}
                 </ul>
-                <ProgressAll doctor={doctor} />
+                <ProgressAll doctor={doctor} loading={loading} />
             </div>
         </div>
     )

components/doctor/detailDoctor/cards/comments/index.js

@@ -1,9 +1,8 @@
-import { Button } from '@mui/material'
 import Chart from './chart'
 import Comment from '@/app/component/comment'
 import ModalAnswer from './modal/ModalAnswer'
 
-function Comments({ doctor }) {
+function Comments({ doctor, loading }) {
     return (
         <div className='mt-[24px] sm:mt-[27px] md:mt-[29px] lg:mt-[32px]'>
             <a
@@ -15,8 +14,8 @@ function Comments({ doctor }) {
                 <p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را در مورد این پزشک به اشتراک بگذارید:</p>
                 <ModalAnswer doctor={doctor} />
             </div>
-            <Chart doctor={doctor} />
+            <Chart doctor={doctor} loading={loading} />
-            <Comment data={doctor} />
+            <Comment data={doctor} loading={loading} />
         </div>
     )
 }

components/doctor/detailDoctor/cards/locations/index.js

@@ -1,6 +1,7 @@
+import CustomLoading from "@/app/component/loading/Custom"
 import Item from "./Item"
 
-function Locations({ doctor }) {
+function Locations({ doctor, loading }) {
     return (
         <div>
             <p
@@ -8,15 +9,17 @@ function Locations({ doctor }) {
             >موقعیت مکانی </p>
             <ul className="flex w-full mt-[24px] flex-col justify-center items-start">
                 {doctor.locations.map((item, idx) => (
-                    <li className="w-full">
+                    <CustomLoading loading={loading} width='full' height={40}>
-                        <Item
+                        <li className="w-full">
-                            key={idx}
+                            <Item
-                            data={item}
+                                key={idx}
-                        />
+                                data={item}
-                        {doctor.locations.length > idx + 1 && (
+                            />
-                            <span className="w-full h-px bg-[#EFEFEF] block my-[12px] md:my-[14px] lg:my-[16px]"></span>
+                            {doctor.locations.length > idx + 1 && (
-                        )}
+                                <span className="w-full h-px bg-[#EFEFEF] block my-[12px] md:my-[14px] lg:my-[16px]"></span>
-                    </li>
+                            )}
+                        </li>
+                    </CustomLoading>
                 ))}
             </ul>
         </div>

components/doctor/detailDoctor/index.js

@@ -5,17 +5,17 @@ import AboutDcotor from "./cards/AboutDcotor"
 import Comments from "./cards/comments"
 import Locations from "./cards/locations"
 
-function DetailDoctor({ doctor }) {
+function DetailDoctor({ doctor, loading }) {
     return (
         <div className="w-full lg:w-[59%]">
             <div className="hidden lg:flex">
                 <Share />
             </div>
-            <Title doctor={doctor} />
+            <Title doctor={doctor} loading={loading} />
             <Link />
-            <AboutDcotor doctor={doctor} />
+            <AboutDcotor loading={loading} doctor={doctor} />
-            <Locations doctor={doctor} />
+            <Locations loading={loading} doctor={doctor} />
-            <Comments doctor={doctor} />
+            <Comments loading={loading} doctor={doctor} />
         </div>
     )
 }

components/doctor/index.js

@@ -1,22 +1,37 @@
+'use client';
+
+import { useEffect, useState } from "react";
 import AppointmentList from "./appointmentList"
 import DetailDoctor from "./detailDoctor"
 import Share from "./detailDoctor/Share";
+import CustomLoading from "@/app/component/loading/Custom";
 
 function DoctorPage({ doctor }) {
+
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    }, []);
+
     return (
         <div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
             <div className="flex items-center justify-between">
-                <div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
+                <CustomLoading loading={loading} width={180} height={25}>
-                    <p className="text-[#9B9B9B] text-nowrap">متخصص {doctor.expertise} {' >'}</p>
+                    <div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
-                    <p className="text-[#525252] text-nowrap mr-1">{doctor.name}</p>
+                        <p className="text-[#9B9B9B] text-nowrap">متخصص {doctor.expertise} {' >'}</p>
-                </div>
+                        <p className="text-[#525252] text-nowrap mr-1">{doctor.name}</p>
+                    </div>
+                </CustomLoading>
                 <div className="flex lg:hidden">
                     <Share />
                 </div>
             </div>
             <div className="flex items-start justify-center gap-6 mt-[30px]">
-                <DetailDoctor doctor={doctor} />
+                <DetailDoctor doctor={doctor} loading={loading} />
-                <AppointmentList doctor={doctor} />
+                <AppointmentList doctor={doctor} loading={loading} />
             </div>
         </div>
     )

components/doctors/index.js

@@ -1,14 +1,14 @@
 'use client';
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import SearchBar from "./search";
 import SortList from "./sortlist";
 import ListDoctors from "./listDoctors";
-
 import LocationD from "../icons/LocationD";
 
 function DoctorsPage() {
 
+    const [loading, setLoading] = useState(true);
     const [data, setData] = useState({
         expertise: '',
         gender: 0,
@@ -16,6 +16,12 @@ function DoctorsPage() {
         turn: true
     });
 
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    }, []);
+
     return (
         <div className="pt-[95px] sm:pt-[120px] padding-responsive">
             <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
@@ -28,7 +34,7 @@ function DoctorsPage() {
                     <SortList data={data} setData={setData} />
                 </div>
             </div>
-            <ListDoctors />
+            <ListDoctors loading={loading} />
         </div>
     )
 }

components/doctors/listDoctors/index.js

@@ -2,16 +2,17 @@ import doctors from '@/data/doctors.json'
 import Pagination from '@/app/component/Pagination';
 import ItemDoctor from '@/app/component/ItemDoctor';
 
-function ListDoctors() {
+function ListDoctors({ loading }) {
     return (
         <>
             <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px] gap-[24px]">
-                {doctors.map(doctor => (
+                {doctors.map(doctor =>
                     <ItemDoctor
                         key={doctor.id}
                         doctor={doctor}
+                        loading={loading}
                     />
-                ))}
+                )}
             </ul>
             <div className='mt-[56px] flex justify-center'>
                 <Pagination />

components/specialties/index.js

@@ -1,8 +1,20 @@
-import HeadPageList from "@/app/component/head"
+'use client';
-import SmSearch from "../searchHead/SmSearch"
+
-import List from "./list"
+import { useEffect, useState } from "react";
+import List from "./list";
+import SmSearch from "../searchHead/SmSearch";
+import HeadPageList from "@/app/component/head";
 
 function SpecialtiesPage() {
+
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    }, []);
+
     return (
         <div className="">
             <HeadPageList
@@ -11,7 +23,7 @@ function SpecialtiesPage() {
             >
                 <SmSearch placeholder='جستجوی تخصص' />
             </HeadPageList>
-            <List />
+            <List loading={loading} />
         </div>
     )
 }

components/specialties/list/ItemSpecialties.js

@@ -1,14 +1,19 @@
+import TextLoading from '@/app/component/loading/Text'
 import React from 'react'
 
-function ItemSpecialties({ data }) {
+function ItemSpecialties({ data, loading }) {
   return (
     <li
       className='py-[17.5px] px-[12px] flex flex-col justify-center items-center gap-[16px] 
       rounded-lg bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
       hover:bg-[#5559CE] transition-all duration-500 cursor-pointer hover-mode-item-speciality'
     >
-      <p className='text-[#3B3B3B] text-[16px] font-bold'>{data.name}</p>
+      <TextLoading loading={loading} width={70} height={18}>
-      <p className='text-[#7E7E7E] text-[14px] font-medium'>{data.number_of_doctors} پزشک</p>
+        <p className='text-[#3B3B3B] text-[16px] font-bold'>{data.name}</p>
+      </TextLoading>
+      <TextLoading loading={loading} width={50} height={18}>
+        <p className='text-[#7E7E7E] text-[14px] font-medium'>{data.number_of_doctors} پزشک</p>
+      </TextLoading>
     </li>
   )
 }

components/specialties/list/index.js

@@ -3,7 +3,7 @@ import ItemSpecialties from './ItemSpecialties';
 import MenuS from '@/components/icons/MenuS';
 import Pagination from '@/app/component/Pagination';
 
-function List() {
+function List({ loading }) {
     return (
         <div className='bg-[#FAFAFA]'>
             <div className='flex items-center justify-center gap-[12px] pt-[24px] mb-[40px]'>
@@ -15,6 +15,7 @@ function List() {
             gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px]">
                 {specialties.map(speciality => (
                     <ItemSpecialties
+                        loading={loading}
                         data={speciality}
                         key={speciality.id}
                     />