add loading all page & change bugs

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
-                    src={doctor.img}
-                    width={56}
-                    height={56}
-                    alt='doctor'
-                />
+                <CircularLoading width={56} height={56} loading={loading}>
+                    <Image
+                        src={doctor.img}
+                        width={56}
+                        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>
-                    <p className="text-[#525252] text-[14px] font-medium">تخصص: {doctor.expertise}</p>
+                    <TextLoading width={60} height={15} loading={loading}>
+                        <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>