add loading all page & change bugs

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
-                    width={60}
-                    height={60}
-                    src={data.img}
-                    alt="img clinic"
-                />
+                <CircularLoading loading={loading} width={60} height={60}>
+                    <Image
+                        width={60}
+                        height={60}
+                        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>
-                    <p className="text-[#7E7E7E] text-[14px] font-normal">{data.doctors} پزشک</p>
+                    <TextLoading loading={loading} width={100} height={18}>
+                        <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>