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

components/blog/relatedContent/index.js

@@ -10,7 +10,7 @@ function RelatedContent({ data, loading }) {
         <UnderlineLG />
       </AnimationTextHead>
       <ul className="flex w-full lg:w-fit flex-col justify-start items-start">
-        {data.map((item, idx) => (
+        {data?.map((item, idx) => (
           <Item idx={idx} data={item} key={item.id} loading={loading} />
         ))}
       </ul>

components/blogs/Head.js

@@ -3,11 +3,11 @@ import TextLoading from "@/app/component/loading/Text";
 import Image from "next/image";
 import Link from "next/link";
 
-function Head({ loading }) {
+function Head() {
   return (
     <div className="flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
       <Link href="#" className="w-full lg:w-1/2 cover-head-blogs">
-        <CustomLoading loading={loading} width="full" height={400}>
+        <CustomLoading width="full" height={400}>
           <Image
             src="/assets/images/head-blogs-1.png"
             width={600}
@@ -15,24 +15,16 @@ function Head({ loading }) {
             alt="head blog"
           />
         </CustomLoading>
-        <div
-          className={
-            loading
-              ? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
-              : ""
-          }
-        >
-          <TextLoading width={150} height={20} loading={loading}>
-            <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
-              روش های خانگی محافظت از پوست در تابستان
-            </p>
-          </TextLoading>
-        </div>
+        <TextLoading width={150} height={20}>
+          <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
+            روش های خانگی محافظت از پوست در تابستان
+          </p>
+        </TextLoading>
       </Link>
       <div className="w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
         <div className="w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
           <Link href="#" className="w-full cover-head-blogs">
-            <CustomLoading loading={loading} width="full" height={180}>
+            <CustomLoading width="full" height={180}>
               <Image
                 src="/assets/images/head-blogs-2.png"
                 width={600}
@@ -40,22 +32,14 @@ function Head({ loading }) {
                 alt="head blog"
               />
             </CustomLoading>
-            <div
-              className={
-                loading
-                  ? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
-                  : ""
-              }
-            >
-              <TextLoading width={150} height={20} loading={loading}>
-                <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
-                  فواید نوشیدن آب برای سلامتی
-                </p>
-              </TextLoading>
-            </div>
+            <TextLoading width={150} height={20}>
+              <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
+                فواید نوشیدن آب برای سلامتی
+              </p>
+            </TextLoading>
           </Link>
           <Link href="#" className="w-full cover-head-blogs">
-            <CustomLoading loading={loading} width="full" height={180}>
+            <CustomLoading width="full" height={180}>
               <Image
                 src="/assets/images/head-blogs-3.png"
                 width={600}
@@ -63,23 +47,15 @@ function Head({ loading }) {
                 alt="head blog"
               />
             </CustomLoading>
-            <div
-              className={
-                loading
-                  ? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
-                  : ""
-              }
-            >
-              <TextLoading width={150} height={20} loading={loading}>
-                <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
-                  راهکارهای ساده برای درمان سر درد
-                </p>
-              </TextLoading>
-            </div>
+            <TextLoading width={150} height={20}>
+              <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
+                راهکارهای ساده برای درمان سر درد
+              </p>
+            </TextLoading>
           </Link>
         </div>
         <Link href="#" className="w-full cover-head-blogs">
-          <CustomLoading loading={loading} width="full" height={180}>
+          <CustomLoading width="full" height={180}>
             <Image
               src="/assets/images/head-blogs-4.png"
               width={600}
@@ -87,19 +63,11 @@ function Head({ loading }) {
               alt="head blog"
             />
           </CustomLoading>
-          <div
-            className={
-              loading
-                ? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
-                : ""
-            }
-          >
-            <TextLoading width={150} height={20} loading={loading}>
-              <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
-                تغذیه مناسب برای کاهش فشار خون
-              </p>
-            </TextLoading>
-          </div>
+          <TextLoading width={150} height={20}>
+            <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
+              تغذیه مناسب برای کاهش فشار خون
+            </p>
+          </TextLoading>
         </Link>
       </div>
     </div>

components/blogs/index.js

@@ -1,25 +1,15 @@
 "use client";
 
-import { useEffect, useState } from "react";
-
 import Head from "./Head";
 import Title from "./title";
 import LatestArticles from "./latestArticles";
 
-function BlogsPage() {
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 2000);
-  }, []);
-
+function BlogsPage({ blogs }) {
   return (
     <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
       <Title />
-      <Head loading={loading} />
-      <LatestArticles loading={loading} />
+      <Head />
+      <LatestArticles blogs={blogs} />
     </div>
   );
 }

components/blogs/latestArticles/Article.js

@@ -3,11 +3,11 @@ import TextLoading from "@/app/component/loading/Text";
 import Image from "next/image";
 import Link from "next/link";
 
-function Article({ data, loading }) {
+function Article({ data }) {
   return (
     <li className="rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]">
-      <CustomLoading width="full" height={200} loading={loading}>
-        <Link href={`/blog/${data.id}`}>
+      <CustomLoading width="full" height={200}>
+        <Link href={`/blog/${data.uuid}`}>
           <Image
             className="w-full"
             alt="article-img"
@@ -18,22 +18,20 @@ function Article({ data, loading }) {
         </Link>
       </CustomLoading>
       <div className="p-[12px] md:p-[14px] lg:p-[16px]">
-        <div className={loading ? "mb-[12px] md:mb-[14px] lg:mb-[16px]" : ""}>
-          <TextLoading width={150} height={18} loading={loading}>
-            <Link href={`/blog/${data.id}`}>
-              <h1 className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold">
-                {data.title}
-              </h1>
-            </Link>
-          </TextLoading>
-        </div>
+        <TextLoading width={150} height={18}>
+          <Link href={`/blog/${data.uuid}`}>
+            <h1 className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold">
+              {data.title}
+            </h1>
+          </Link>
+        </TextLoading>
         <div className="flex items-center justify-start gap-[35px]">
-          <TextLoading width={100} height={18} loading={loading}>
+          <TextLoading width={100} height={18}>
             <p className="text-[#9B9B9B] text-[14px] font-medium">
               تاریخ انتشار: {data.date_of_release}
             </p>
           </TextLoading>
-          <TextLoading width={110} height={18} loading={loading}>
+          <TextLoading width={110} height={18}>
             <p className="text-[#9B9B9B] text-[14px] font-medium">
               زمان مطالعه: {data.time}
             </p>

components/blogs/latestArticles/index.js

@@ -1,20 +1,19 @@
-import articles from "@/data/articles.json";
 import Article from "./Article";
 import Pagination from "@/app/component/Pagination";
 
-function LatestArticles({ loading }) {
+function LatestArticles({ blogs }) {
   return (
     <div>
       <p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">
         جدیدترین مقاله ها
       </p>
       <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
-        {articles.map((item) => (
-          <Article data={item} key={item.id} loading={loading} />
+        {blogs.map((item) => (
+          <Article data={item} key={item.uuid} />
         ))}
       </ul>
       <div className="mt-[56px] flex justify-center">
-        <Pagination />
+        <Pagination list={blogs} itemsPerPage={12} />
       </div>
     </div>
   );

components/clinic/components/about/ContentDetail.js

@@ -1,10 +1,10 @@
 import TextLoading from "@/app/component/loading/Text";
 import React from "react";
 
-function ContentDetail({ head, children, loading }) {
+function ContentDetail({ head, children }) {
   return (
     <div className="my-[24px]">
-      <TextLoading width={200} height={20} loading={loading}>
+      <TextLoading width={200} height={20}>
         <h1 className="text-[#3B3B3B] text-[20px] font-bold">{head}</h1>
       </TextLoading>
       <div className="mt-[16px]">{children}</div>

components/clinic/components/about/ListBime.js

@@ -4,7 +4,7 @@ import { Button } from "@mui/material";
 import Image from "next/image";
 import { useRef } from "react";
 
-function ListBime({ data, loading }) {
+function ListBime({ data }) {
   const list = useRef();
 
   const handleScroll = (type) => {
@@ -28,7 +28,7 @@ function ListBime({ data, loading }) {
         className="flex overflow-auto hidden-scroll mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]"
       >
         {data?.list_bime?.map((item, idx) => (
-          <CustomLoading width={156} height={110} loading={loading}>
+          <CustomLoading width={156} height={110}>
             <li
               key={idx}
               className="p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]"

components/clinic/components/about/Services.js

@@ -1,7 +1,7 @@
 import TextLoading from "@/app/component/loading/Text";
 import TickCircleOrange from "@/components/icons/TickCircleOrange";
 
-function Services({ data, loading }) {
+function Services({ data }) {
   return (
     <ul
       className="
@@ -14,7 +14,7 @@ function Services({ data, loading }) {
           <div className="min-w-[24px] min-h-[24px]">
             <TickCircleOrange />
           </div>
-          <TextLoading width={80} height={18} loading={loading}>
+          <TextLoading width={80} height={18}>
             <h3
               className={`
             text-[16px] font-normal 

components/clinic/components/about/Specialties.js

@@ -1,7 +1,7 @@
 import TextLoading from "@/app/component/loading/Text";
 import TickCircleOrange from "@/components/icons/TickCircleOrange";
 
-function Specialties({ data, loading }) {
+function Specialties({ data }) {
   return (
     <ul
       className="
@@ -14,7 +14,7 @@ function Specialties({ data, loading }) {
           <div className="min-w-[24px] min-h-[24px]">
             <TickCircleOrange />
           </div>
-          <TextLoading width={80} height={18} loading={loading}>
+          <TextLoading width={80} height={18}>
             <h3
               className={`
                         text-[16px] font-normal

components/clinic/components/about/images/Images.js

@@ -3,7 +3,7 @@ import Slider from "./Slider";
 import Image from "next/image";
 import CustomLoading from "@/app/component/loading/Custom";
 
-function Images({ data, loading }) {
+function Images({ data }) {
   return (
     <div
       className="
@@ -12,18 +12,23 @@ function Images({ data, loading }) {
         "
     >
       <div className="w-full">
-        <CustomLoading loading={loading} width={600} height={400}>
+        <CustomLoading width={600} height={400}>
           <Image
             className="rounded-[8px] overflow-hidden"
-            src={data?.images_clinic && !!data?.images_clinic.length && data?.images_clinic[0] || ""}
+            src={
+              (data?.images_clinic &&
+                !!data?.images_clinic.length &&
+                data?.images_clinic[0]) ||
+              ""
+            }
             alt="img clinic"
             height={432}
             width={600}
           />
         </CustomLoading>
       </div>
-      <List data={data} loading={loading} />
-      <Slider data={data} loading={loading} />
+      <List data={data} />
+      <Slider data={data} />
     </div>
   );
 }

components/clinic/components/about/images/List.js

@@ -1,11 +1,11 @@
 import CustomLoading from "@/app/component/loading/Custom";
 import Image from "next/image";
 
-function List({ data, loading }) {
+function List({ data }) {
   return (
     <div className="hidden w-full md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
       <div className="w-full">
-        <CustomLoading loading={loading} width="full" height={190}>
+        <CustomLoading width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
             src={
@@ -21,7 +21,7 @@ function List({ data, loading }) {
         </CustomLoading>
       </div>
       <div className="w-full">
-        <CustomLoading loading={loading} width="full" height={190}>
+        <CustomLoading width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
             src={
@@ -37,7 +37,7 @@ function List({ data, loading }) {
         </CustomLoading>
       </div>
       <div className="w-full">
-        <CustomLoading loading={loading} width="full" height={190}>
+        <CustomLoading width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
             src={
@@ -53,7 +53,7 @@ function List({ data, loading }) {
         </CustomLoading>
       </div>
       <div className="w-full">
-        <CustomLoading loading={loading} width="full" height={190}>
+        <CustomLoading width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
             src={

components/clinic/components/about/images/Slider.js

@@ -1,14 +1,14 @@
 import CustomLoading from "@/app/component/loading/Custom";
 import Image from "next/image";
 
-function Slider({ data, loading }) {
+function Slider({ data }) {
   return (
     <ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
       {data &&
         data.images_clinic &&
         [...data?.images_clinic, ...data?.images_clinic]?.map((item, idx) =>
           idx !== 0 ? (
-            <CustomLoading width={90} height={90} loading={loading}>
+            <CustomLoading width={90} height={90}>
               <Image
                 key={idx}
                 src={item}

components/clinic/components/about/index.js

@@ -8,20 +8,15 @@ import Specialties from "./Specialties";
 import ContentDetail from "./ContentDetail";
 import MultilineLoading from "@/app/component/loading/Multiline";
 
-function About({ data, loading }) {
+function About({ data }) {
   const [isMore, setIsMore] = useState(false);
 
   return (
     <div className="opacity-page transition-all duration-500">
-      <Images data={data} loading={loading} />
-      <ContentDetail loading={loading} head="کلینیک تخصصی و فوق تخصصی نیکان">
+      <Images data={data} />
+      <ContentDetail head="کلینیک تخصصی و فوق تخصصی نیکان">
         <div className="flex flex-col items-center justify-center">
-          <MultilineLoading
-            line={10}
-            loading={loading}
-            width="full"
-            height={18}
-          >
+          <MultilineLoading line={10} width="full" height={18}>
             <p
               className={`
                         text-[#525252] text-[16px] font-normal leading-[32px] overflow-hidden relative
@@ -37,9 +32,7 @@ function About({ data, loading }) {
             ></p>
           </MultilineLoading>
           <Button
-            className={`${
-              loading && "!hidden"
-            } !text-[#F17732] !text-[14px] !font-light !p-2`}
+            className='!text-[#F17732] !text-[14px] !font-light !p-2'
             onClick={() => setIsMore(!isMore)}
             variant="text"
           >
@@ -48,13 +41,13 @@ function About({ data, loading }) {
         </div>
       </ContentDetail>
       <ContentDetail head="بیمه های طرف قرارداد">
-        <ListBime loading={loading} data={data} />
+        <ListBime data={data} />
       </ContentDetail>
       <ContentDetail head="تخصص ها">
-        <Specialties loading={loading} data={data} />
+        <Specialties data={data} />
       </ContentDetail>
       <ContentDetail head="خدمات">
-        <Services loading={loading} data={data} />
+        <Services data={data} />
       </ContentDetail>
     </div>
   );

components/clinic/components/contact/ContentDetail.js

@@ -1,14 +1,14 @@
 import TextLoading from "@/app/component/loading/Text";
 
-function ContentDetail({ head, detail, loading }) {
+function ContentDetail({ head, detail }) {
   return (
     <li className="flex flex-col items-start justify-center gap-4">
-      <TextLoading width={100} height={18} loading={loading}>
+      <TextLoading width={100} height={18}>
         <p className="text-[#525252] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
           {head}
         </p>
       </TextLoading>
-      <TextLoading width={160} height={18} loading={loading}>
+      <TextLoading width={160} height={18}>
         <p className="text-[14px] md:text-[16px] text-[#525252]">{detail}</p>
       </TextLoading>
     </li>

components/clinic/components/contact/Detail.js

@@ -1,20 +1,18 @@
 import ContentDetail from "./ContentDetail";
 
-function Detail({ data, loading }) {
+function Detail({ data }) {
   return (
     <ul className="flex flex-col items-start justify-start gap-[16px]">
       <ContentDetail
         head="روزهای کاری: "
-        loading={loading}
         detail={`ساعت کاری: ${data.hours_of_work}`}
       />
       <ContentDetail
         head="تلفن: "
-        loading={loading}
         detail={`${data.phone_number_1} ${data.phone_number_2}`}
       />
-      <ContentDetail head="ایمیل:" loading={loading} detail={data.email} />
-      <ContentDetail head="آدرس: " loading={loading} detail={data.location} />
+      <ContentDetail head="ایمیل:" detail={data.email} />
+      <ContentDetail head="آدرس: " detail={data.location} />
     </ul>
   );
 }

components/clinic/components/contact/index.js

@@ -7,7 +7,7 @@ import RoutingC from "@/components/icons/RoutingC";
 import ModalOpenLocation from "@/app/component/openLocation";
 import CustomLoading from "@/app/component/loading/Custom";
 
-function Contact({ data, loading }) {
+function Contact({ data }) {
   const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
@@ -21,7 +21,7 @@ function Contact({ data, loading }) {
             "
     >
       <div className="flex items-end justify-between">
-        <Detail data={data} loading={loading} />
+        <Detail data={data} />
         <ModalOpenLocation
           open={open}
           setOpen={setOpen}
@@ -38,7 +38,7 @@ function Contact({ data, loading }) {
         </ModalOpenLocation>
       </div>
       <div className="w-full relative h-[460px] mt-[24px]">
-        <CustomLoading width="full" height={400} loading={loading}>
+        <CustomLoading width="full" height={400}>
           <iframe
             src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.96777841153!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2snl!4v1723498499341!5m2!1sen!2snl"
             className="w-full h-full rounded-lg"

components/clinic/components/doctors/List.js

@@ -1,12 +1,12 @@
 import ItemDoctor from "@/app/component/ItemDoctor";
 import Pagination from "@/app/component/Pagination";
 
-function List({ doctors, loading }) {
+function List({ doctors }) {
   return (
     <>
       <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[40px] gap-[16px] md:gap-[20px] lg:gap-[24px]">
         {doctors.map((doctor) => (
-          <ItemDoctor key={doctor.id} doctor={doctor} loading={loading} />
+          <ItemDoctor key={doctor.id} doctor={doctor} />
         ))}
       </ul>
       <div className="mt-[56px] flex justify-center">

components/clinic/components/doctors/index.js

@@ -5,7 +5,7 @@ import List from "./List";
 import { useState } from "react";
 import { searchOnList } from "@/helper";
 
-function Doctors({ doctors, loading }) {
+function Doctors({ doctors }) {
   const [filteredSpecialties, setFilteredSpecialties] = useState(doctors);
 
   const handleSearch = (value) =>
@@ -20,7 +20,7 @@ function Doctors({ doctors, loading }) {
           placeholder="جستجوی پزشک یا تخصص"
         />
       </div>
-      <List loading={loading} doctors={filteredSpecialties} />
+      <List doctors={filteredSpecialties} />
     </div>
   );
 }

components/clinic/index.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import About from "./components/about";
 import Contact from "./components/contact";
@@ -11,21 +11,14 @@ const listTab = ["درباره کلینیک", "اطلاعات تماس", "پزش
 
 function ClinicPage({ data, doctors }) {
   const [value, setValue] = useState(0);
-  const [loading, setLoading] = useState(true);
   const handleChange = (event, newValue) => setValue(newValue);
 
   const Components = [
-    <About data={data} loading={loading} />,
-    <Contact data={data} loading={loading} />,
-    <Doctors doctors={doctors} loading={loading} />,
+    <About data={data} />,
+    <Contact data={data} />,
+    <Doctors doctors={doctors} />,
   ];
 
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 2000);
-  }, []);
-
   return (
     <div className="pt-[40px] sm:pt-[70px] md:pt-[100px] lg:pt-[136px] mt-[40px] padding-responsive">
       <Tabs

components/clinics/index.js

@@ -22,9 +22,6 @@ function ClinicsPage({ clinics, matchedCity, matchedState }) {
     current.set("search", value);
     const queryString = current.toString();
     router.push(`/clinics?${queryString}`);
-    // const searchOnName = searchOnList(clinics, value, "title");
-    // const searchOnLocation = searchOnList(searchOnName, selected.city, "city");
-    // setFilteredClinics(searchOnLocation);
   };
 
   return (

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>
   );