add loading all page & change bugs

components/specialties/index.js

@@ -1,8 +1,20 @@
-import HeadPageList from "@/app/component/head"
-import SmSearch from "../searchHead/SmSearch"
-import List from "./list"
+'use client';
+
+import { useEffect, useState } from "react";
+import List from "./list";
+import SmSearch from "../searchHead/SmSearch";
+import HeadPageList from "@/app/component/head";
 
 function SpecialtiesPage() {
+
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    }, []);
+
     return (
         <div className="">
             <HeadPageList
@@ -11,7 +23,7 @@ function SpecialtiesPage() {
             >
                 <SmSearch placeholder='جستجوی تخصص' />
             </HeadPageList>
-            <List />
+            <List loading={loading} />
         </div>
     )
 }

components/specialties/list/ItemSpecialties.js

@@ -1,14 +1,19 @@
+import TextLoading from '@/app/component/loading/Text'
 import React from 'react'
 
-function ItemSpecialties({ data }) {
+function ItemSpecialties({ data, loading }) {
   return (
     <li
       className='py-[17.5px] px-[12px] flex flex-col justify-center items-center gap-[16px] 
       rounded-lg bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
       hover:bg-[#5559CE] transition-all duration-500 cursor-pointer hover-mode-item-speciality'
     >
-      <p className='text-[#3B3B3B] text-[16px] font-bold'>{data.name}</p>
-      <p className='text-[#7E7E7E] text-[14px] font-medium'>{data.number_of_doctors} پزشک</p>
+      <TextLoading loading={loading} width={70} height={18}>
+        <p className='text-[#3B3B3B] text-[16px] font-bold'>{data.name}</p>
+      </TextLoading>
+      <TextLoading loading={loading} width={50} height={18}>
+        <p className='text-[#7E7E7E] text-[14px] font-medium'>{data.number_of_doctors} پزشک</p>
+      </TextLoading>
     </li>
   )
 }

components/specialties/list/index.js

@@ -3,7 +3,7 @@ import ItemSpecialties from './ItemSpecialties';
 import MenuS from '@/components/icons/MenuS';
 import Pagination from '@/app/component/Pagination';
 
-function List() {
+function List({ loading }) {
     return (
         <div className='bg-[#FAFAFA]'>
             <div className='flex items-center justify-center gap-[12px] pt-[24px] mb-[40px]'>
@@ -15,6 +15,7 @@ function List() {
             gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px]">
                 {specialties.map(speciality => (
                     <ItemSpecialties
+                        loading={loading}
                         data={speciality}
                         key={speciality.id}
                     />