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

components/doctor/detailDoctor/Title.js

@@ -6,10 +6,10 @@ import StarDI from "@/components/icons/StarDI";
 import TickCircle from "@/components/icons/TickCircle";
 import Image from "next/image";
 
-function Title({ doctor, loading }) {
+function Title({ doctor }) {
   return (
     <div className="flex flex-col lg:flex-row items-center justify-start gap-[8px] lg:gap-[32px]">
-      <CircularLoading loading={loading} width={100} height={100}>
+      <CircularLoading width={100} height={100}>
         <Image
           className="
                     w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px]
@@ -22,18 +22,18 @@ function Title({ doctor, loading }) {
         />
       </CircularLoading>
       <div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">
-        <TextLoading loading={loading} width={90} height={20}>
+        <TextLoading width={90} height={20}>
           <h1 className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
             {doctor?.title}
           </h1>
         </TextLoading>
-        <TextLoading loading={loading} width={100} height={20}>
+        <TextLoading width={100} height={20}>
           <h3 className="text-[#525252] text-[14px] md:text-[16px] font-medium">
             تخصص: {doctor?.expertise}
           </h3>
         </TextLoading>
         <div className="flex items-center justify-start gap-11">
-          <TextLoading loading={loading} width={60} height={20}>
+          <TextLoading width={60} height={20}>
             <p className="text-[#525252] text-[16px] font-medium">
               {doctor?.experience} سال تجربه
             </p>
@@ -42,14 +42,14 @@ function Title({ doctor, loading }) {
             <div className="hidden lg:flex">
               <TickCircle />
             </div>
-            <TextLoading loading={loading} width={120} height={20}>
+            <TextLoading width={120} height={20}>
               <p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-medium">
                 کد نظام پزشکی: {doctor?.medical_system_code}
               </p>
             </TextLoading>
           </div>
         </div>
-        <CustomLoading loading={loading} width={160} height={25}>
+        <CustomLoading width={160} height={25}>
           <div className="flex items-center justify-start gap-2">
             <div className="flex p-1 gap-0.5 items-start justify-center">
               <StarDI />

components/doctor/detailDoctor/cards/AboutDcotor.js

@@ -5,7 +5,7 @@ import { Button } from "@mui/material";
 import MultilineLoading from "@/app/component/loading/Multiline";
 import TextLoading from "@/app/component/loading/Text";
 
-function AboutDcotor({ doctor, loading }) {
+function AboutDcotor({ doctor }) {
   const [isMore, setIsMore] = useState(false);
 
   return (
@@ -15,7 +15,7 @@ function AboutDcotor({ doctor, loading }) {
         className="absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]"
       ></a>
       <div className="flex flex-col items-center justify-center">
-        <MultilineLoading loading={loading} width="full" height={18} line={30}>
+        <MultilineLoading width="full" height={18} line={30}>
           <p
             className={`
                         text-[#616161] text-[14px] font-normal overflow-hidden relative
@@ -47,7 +47,7 @@ function AboutDcotor({ doctor, loading }) {
           {doctor?.specialties?.map((item, idx) => (
             <li key={idx} className="flex items-center justify-start gap-1">
               <span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
-              <TextLoading loading={loading} width={70} height={18}>
+              <TextLoading width={70} height={18}>
                 <h4 className="text-[#616161] text-[16px] font-normal text-nowrap">
                   {item}
                 </h4>

components/doctor/detailDoctor/cards/comments/chart/ProgressAll.js

@@ -2,10 +2,10 @@ import CircularLoading from "@/app/component/loading/Circular";
 import { numberToArStyle } from "@/helper";
 import { CircularProgress } from "@mui/material";
 
-function ProgressAll({ doctor, loading }) {
+function ProgressAll({ doctor }) {
   return (
     <div className="hidden lg:flex w-full h-fit relative min-w-[145px] max-w-[150px]">
-      <CircularLoading loading={loading} width={120} height={120}>
+      <CircularLoading width={120} height={120}>
         <CircularProgress
           variant="determinate"
           value={doctor?.total_user_satisfaction}

components/doctor/detailDoctor/cards/comments/chart/index.js

@@ -6,7 +6,7 @@ import ProgressDetail from "@/app/component/ProfressDetail";
 import TextLoading from "@/app/component/loading/Text";
 import CustomLoading from "@/app/component/loading/Custom";
 
-function Chart({ doctor, loading }) {
+function Chart({ doctor }) {
   return (
     <div
       className="
@@ -14,7 +14,7 @@ function Chart({ doctor, loading }) {
             pt-[12px] md:pt-[14px] lg:pt-[16px] pb-[12px] sm:pb-[16px] md:pb-[20px] lg:pb-[24px] px-[12px] sm:px-[16px] md:px-[20px] lg:px-[24px]
         "
     >
-      <TextLoading loading={loading} width={130} height={20}>
+      <TextLoading width={130} height={20}>
         <div className="flex items-center justify-start gap-2.5">
           <p className="text-[#616161] text-[14px] font-medium">
             امتیاز کلی کاربران: {doctor?.overall_score} از 5
@@ -24,8 +24,8 @@ function Chart({ doctor, loading }) {
           </p>
         </div>
       </TextLoading>
-      <div className={`${loading ? "mt-4 mb-6" : "mt-0 mb-0"} hidden md:flex`}>
-        <TextLoading loading={loading} width={160} height={20}>
+      <div className="mt-0 mb-0 hidden md:flex">
+        <TextLoading width={160} height={20}>
           <Rating
             readOnly
             value={4}
@@ -36,7 +36,7 @@ function Chart({ doctor, loading }) {
         </TextLoading>
       </div>
       <div className="flex items-center justify-start gap-2 my-[12px] md:hidden">
-        <CustomLoading loading={loading} width={130} height={30}>
+        <CustomLoading width={130} height={30}>
           <div className="flex p-1 gap-0.5 items-start justify-center">
             <StarDI />
             <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
@@ -52,18 +52,14 @@ function Chart({ doctor, loading }) {
         </CustomLoading>
       </div>
       <div className="flex flex-wrap items-center justify-center gap-[50px]">
-        <ul
-          className={`flex w-full flex-col items-start justify-start gap-1.5 ${
-            loading ? "lg:w-full" : "lg:w-fit"
-          }`}
-        >
+        <ul className="flex w-full flex-col items-start justify-start gap-1.5 lg:w-fit">
           {doctor?.progress_detail?.map((item, idx) => (
-            <TextLoading width="full" key={idx} height={20} loading={loading}>
+            <TextLoading width="full" key={idx} height={20}>
               <ProgressDetail data={item} />
             </TextLoading>
           ))}
         </ul>
-        <ProgressAll doctor={doctor} loading={loading} />
+        <ProgressAll doctor={doctor} />
       </div>
     </div>
   );

components/doctor/detailDoctor/cards/comments/index.js

@@ -2,7 +2,7 @@ import Chart from "./chart";
 import Comment from "@/app/component/comment";
 import ModalAnswer from "./modal/ModalAnswer";
 
-function Comments({ doctor, loading }) {
+function Comments({ doctor }) {
   return (
     <div className="mt-[24px] sm:mt-[27px] md:mt-[29px] lg:mt-[32px]">
       <a
@@ -18,8 +18,8 @@ function Comments({ doctor, loading }) {
         </p>
         <ModalAnswer doctor={doctor} />
       </div>
-      <Chart doctor={doctor} loading={loading} />
-      <Comment data={doctor} loading={loading} />
+      <Chart doctor={doctor} />
+      <Comment data={doctor} />
     </div>
   );
 }

components/doctor/detailDoctor/cards/locations/index.js

@@ -1,7 +1,7 @@
 import CustomLoading from "@/app/component/loading/Custom";
 import Item from "./Item";
 
-function Locations({ doctor, loading }) {
+function Locations({ doctor }) {
   return (
     <div>
       <p className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
@@ -9,7 +9,7 @@ function Locations({ doctor, loading }) {
       </p>
       <ul className="flex w-full mt-[24px] flex-col justify-center items-start">
         {doctor?.locations?.map((item, idx) => (
-          <CustomLoading key={idx} loading={loading} width="full" height={40}>
+          <CustomLoading key={idx} width="full" height={40}>
             <li className="w-full">
               <Item data={item} />
               {doctor?.locations.length > idx + 1 && (

components/doctor/detailDoctor/index.js

@@ -5,17 +5,17 @@ import AboutDcotor from "./cards/AboutDcotor";
 import Comments from "./cards/comments";
 import Locations from "./cards/locations";
 
-function DetailDoctor({ doctor, loading }) {
+function DetailDoctor({ doctor }) {
   return (
     <div className="w-full lg:w-[59%]">
       <div className="hidden lg:flex">
         <Share />
       </div>
-      <Title doctor={doctor} loading={loading} />
+      <Title doctor={doctor} />
       <Link />
-      <AboutDcotor loading={loading} doctor={doctor} />
-      <Locations loading={loading} doctor={doctor} />
-      <Comments loading={loading} doctor={doctor} />
+      <AboutDcotor doctor={doctor} />
+      <Locations doctor={doctor} />
+      <Comments doctor={doctor} />
     </div>
   );
 }

components/doctor/index.js

@@ -7,7 +7,7 @@ function DoctorPage({ doctor }) {
   return (
     <div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
       <div className="flex items-center justify-between">
-        <CustomLoading loading={false} width={180} height={25}>
+        <CustomLoading width={180} height={25}>
           <div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
             <h2 className="text-[#9B9B9B] text-nowrap">
               متخصص {doctor?.expertise} {" >"}
@@ -20,8 +20,8 @@ function DoctorPage({ doctor }) {
         </div>
       </div>
       <div className="flex items-start justify-center gap-6 mt-[30px]">
-        <DetailDoctor doctor={doctor} loading={false} />
-        <AppointmentList doctor={doctor} loading={false} />
+        <DetailDoctor doctor={doctor} />
+        <AppointmentList doctor={doctor} />
       </div>
     </div>
   );