add loading all page & change bugs

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>
     )
 }