change data blog item and clinic item & change pages clinic and clinic to ssr & remove loading & handle pagination page clinics

app/component/ItemDoctor.js

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { Button, Skeleton } from "@mui/material";
+import { Button } from "@mui/material";
 
 // Icons
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
@@ -11,12 +11,12 @@ import CustomLoading from "./loading/Custom";
 import TextLoading from "./loading/Text";
 import CircularLoading from "./loading/Circular";
 
-function ItemDoctor({ doctor, loading }) {
+function ItemDoctor({ doctor }) {
   return (
     <li className="p-4 relative rounded-lg bg-[#FFF] border border-[#EFEFEF]">
       {/* Detail Doctor */}
       <div className="flex items-center justify-start gap-2.5">
-        <CircularLoading loading={loading} width={66} height={66}>
+        <CircularLoading width={66} height={66}>
           <Image
             width={72}
             height={72}
@@ -26,17 +26,17 @@ function ItemDoctor({ doctor, loading }) {
           />
         </CircularLoading>
         <div className="flex flex-col items-start justify-center gap-2">
-          <TextLoading width={90} height={15} loading={loading}>
+          <TextLoading width={90} height={15}>
             <p className="text-[#3B3B3B] text-[14px] font-bold">
               {doctor.name}
             </p>
           </TextLoading>
-          <TextLoading width={120} height={15} loading={loading}>
+          <TextLoading width={120} height={15}>
             <p className="text-[#616161] text-[14px] font-normal">
               تخصص: {doctor.expertise}
             </p>
           </TextLoading>
-          <CustomLoading width={100} height={25} loading={loading}>
+          <CustomLoading width={100} height={25}>
             <div className="flex rounded items-center justify-start gap-2">
               <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
                 <LikeD />
@@ -58,13 +58,13 @@ function ItemDoctor({ doctor, loading }) {
       {/* Hours of work */}
       <div className="flex my-4 items-center justify-start gap-0.5">
         <ClockD />
-        <TextLoading width={150} height={15} loading={loading}>
+        <TextLoading width={150} height={15}>
           <p className="text-[#7E7E7E] text-[12px] font-normal">
             ساعت کاری: {doctor.hours_of_work}
           </p>
         </TextLoading>
       </div>
-      <CustomLoading loading={loading} width={150} height={20}>
+      <CustomLoading width={150} height={20}>
         <p
           className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
                     ${
@@ -83,9 +83,9 @@ function ItemDoctor({ doctor, loading }) {
         <Button
           variant="contained"
           className={`!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit 
-                     ${!Number(doctor.active) || (loading && "!bg-[#D7D7D7]")}
+                     ${!Number(doctor.active)}
                     `}
-          disabled={!Number(doctor.active) || loading}
+          disabled={!Number(doctor.active)}
         >
           <ArrowLeftD />
         </Button>