add loading all page & change bugs

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