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

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 />