add loading all page & change bugs

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">
-                    <p className="text-[#9B9B9B] text-nowrap">متخصص {doctor.expertise} {' >'}</p>
-                    <p className="text-[#525252] text-nowrap mr-1">{doctor.name}</p>
-                </div>
+                <CustomLoading loading={loading} width={180} height={25}>
+                    <div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
+                        <p className="text-[#9B9B9B] text-nowrap">متخصص {doctor.expertise} {' >'}</p>
+                        <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} />
-                <AppointmentList doctor={doctor} />
+                <DetailDoctor doctor={doctor} loading={loading} />
+                <AppointmentList doctor={doctor} loading={loading} />
             </div>
         </div>
     )