round img of doctors && fix remove 'nobat724' value in city data for all pages && handle send req for filter clinics && filter list clinic for first time on load page && add component loading and handle it in page clinics

components/clinics/list/ItemClinic.js

@@ -7,25 +7,26 @@ 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">
-        <CircularLoading width={60} height={60}>
+        <CircularLoading loading={loading} width={60} height={60}>
           <Image
             width={60}
             height={60}
+            className="object-cover rounded-full w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
             src={data.clinic_logo[0].url || ""}
             alt="img clinic"
           />
         </CircularLoading>
         <div className="flex flex-col items-start justify-center gap-2">
-          <TextLoading width={100} height={18}>
+          <TextLoading loading={loading} width={100} height={18}>
             <h3 className="text-[#3B3B3B] text-[14px] font-bold">
               {data.title}
             </h3>
           </TextLoading>
-          <TextLoading width={60} height={18}>
+          <TextLoading loading={loading} width={60} height={18}>
             <p className="text-[#7E7E7E] text-[14px] font-normal">
               {data.doctors} پزشک
             </p>
@@ -35,7 +36,7 @@ function ItemClinic({ data }) {
       <div className="flex flex-col items-start mt-4 gap-4 mb-[14px]">
         <div className="flex items-start justify-start gap-0.5">
           <LocationClinic />
-          <TextLoading width={150} height={18}>
+          <TextLoading loading={loading} width={150} height={18}>
             <p className="text-[#7E7E7E] text-[12px] font-normal">
               {data.location}
             </p>
@@ -43,7 +44,7 @@ function ItemClinic({ data }) {
         </div>
         <div className="flex items-start justify-start gap-0.5 ml-[64px]">
           <ClockClinic />
-          <TextLoading width={120} height={18}>
+          <TextLoading loading={loading} width={120} height={18}>
             <p className="text-[#7E7E7E] text-[12px] font-normal">
               ساعت کاری: {data.hours_of_work}
             </p>