From 0217e5e67ef01ed100c063c4ac18bc867ae56754 Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Mon, 2 Jun 2025 06:04:49 +0330
Subject: [PATCH] change data blog item and clinic item & change pages clinic
 and clinic to ssr & remove loading & handle pagination page clinics

---
 app/blog/[slug]/page.js                       | 14 ++-
 app/blogs/page.js                             | 12 ++-
 app/component/ItemDoctor.js                   | 20 ++---
 app/component/comment/ItemUser.js             | 90 ++++++-------------
 app/component/comment/index.js                |  3 +-
 app/component/openLocation/Content.js         | 11 ++-
 components/blog/relatedContent/index.js       |  2 +-
 components/blogs/Head.js                      | 82 ++++++-----------
 components/blogs/index.js                     | 16 +---
 components/blogs/latestArticles/Article.js    | 26 +++---
 components/blogs/latestArticles/index.js      |  9 +-
 .../clinic/components/about/ContentDetail.js  |  4 +-
 .../clinic/components/about/ListBime.js       |  4 +-
 .../clinic/components/about/Services.js       |  4 +-
 .../clinic/components/about/Specialties.js    |  4 +-
 .../clinic/components/about/images/Images.js  | 15 ++--
 .../clinic/components/about/images/List.js    | 10 +--
 .../clinic/components/about/images/Slider.js  |  4 +-
 components/clinic/components/about/index.js   | 23 ++---
 .../components/contact/ContentDetail.js       |  6 +-
 .../clinic/components/contact/Detail.js       |  8 +-
 components/clinic/components/contact/index.js |  6 +-
 components/clinic/components/doctors/List.js  |  4 +-
 components/clinic/components/doctors/index.js |  4 +-
 components/clinic/index.js                    | 15 +---
 components/clinics/index.js                   |  3 -
 components/doctor/detailDoctor/Title.js       | 14 +--
 .../doctor/detailDoctor/cards/AboutDcotor.js  |  6 +-
 .../cards/comments/chart/ProgressAll.js       |  4 +-
 .../cards/comments/chart/index.js             | 20 ++---
 .../detailDoctor/cards/comments/index.js      |  6 +-
 .../detailDoctor/cards/locations/index.js     |  4 +-
 components/doctor/detailDoctor/index.js       | 10 +--
 components/doctor/index.js                    |  6 +-
 services/response.js                          |  1 +
 35 files changed, 194 insertions(+), 276 deletions(-)

diff --git a/app/blog/[slug]/page.js b/app/blog/[slug]/page.js
index 4022aa7..165a233 100644
--- a/app/blog/[slug]/page.js
+++ b/app/blog/[slug]/page.js
@@ -1,13 +1,21 @@
+import axios from "axios";
 import BlogPage from "@/components/blog";
 import articles from "@/data/articles.json";
 import Layout from "@/components/layout/StLayout";
 
-function Blog({ params: { slug } }) {
-  const article = articles.find((item) => item.id === +slug);
+async function Blog({ params: { slug } }) {
+  const blog = await axios.get(
+    `https://back-dev.clinic-pro.ir/api/v1/blog/${slug}`
+  );
+  const blogs = await axios.get("https://back-dev.clinic-pro.ir/api/v1/blogs");
+
+  const resBlog = blog.data;
+  const resBlogs = blogs.data;
+  console.log(resBlogs);
 
   return (
     <Layout>
-      <BlogPage article={article} articles={articles} />
+      <BlogPage blog={resBlog} blogs={resBlogs} />
     </Layout>
   );
 }
diff --git a/app/blogs/page.js b/app/blogs/page.js
index ed9764b..ba253de 100644
--- a/app/blogs/page.js
+++ b/app/blogs/page.js
@@ -1,12 +1,16 @@
 import BlogsPage from "@/components/blogs";
 import Layout from "@/components/layout/StLayout";
+import axios from "axios";
+
+export default async function Blogs() {
+  const response = await axios.get(
+    "https://back-dev.clinic-pro.ir/api/v1/blogs"
+  );
+  const blogs = response.data.blogs;
 
-function Blogs() {
   return (
     <Layout name="/blogs">
-      <BlogsPage />
+      <BlogsPage blogs={blogs} />
     </Layout>
   );
 }
-
-export default Blogs;
diff --git a/app/component/ItemDoctor.js b/app/component/ItemDoctor.js
index 4a694a4..719ba37 100644
--- a/app/component/ItemDoctor.js
+++ b/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>
diff --git a/app/component/comment/ItemUser.js b/app/component/comment/ItemUser.js
index 0f29681..fb5785b 100644
--- a/app/component/comment/ItemUser.js
+++ b/app/component/comment/ItemUser.js
@@ -9,15 +9,7 @@ import DisLikeComment from "@/components/icons/DisLikeComment";
 import ArrowUpComment from "@/components/icons/ArrowUpComment";
 import LikeComment from "@/components/icons/LikeComment";
 
-function ItemUser({
-  update,
-  setUpdate,
-  isReply,
-  list,
-  setList,
-  data,
-  loading,
-}) {
+function ItemUser({ update, setUpdate, isReply, list, setList, data }) {
   const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
     if (nameIsLike === "is_like" && data.is_dislike) {
       data.is_dislike = false;
@@ -34,46 +26,26 @@ function ItemUser({
   return (
     <li className="w-full">
       <div className="flex items-center justify-start gap-2">
-        {loading ? (
-          <Skeleton
-            variant="circular"
-            className="!min-w-[40px] !min-h-[40px]"
-          />
-        ) : (
-          <Image
-            className="!w-[32px] !h-[32px] sm:!w-[35px] sm:!h-[35px] md:!h-[37px] md:!w-[37px] lg:!w-[40px] lg:!h-[40px]"
-            src={data.profile}
-            width={40}
-            height={40}
-            alt="profile"
-          />
-        )}
+        <Image
+          className="!w-[32px] !h-[32px] sm:!w-[35px] sm:!h-[35px] md:!h-[37px] md:!w-[37px] lg:!w-[40px] lg:!h-[40px]"
+          src={data.profile}
+          width={40}
+          height={40}
+          alt="profile"
+        />
         <div className="flex flex-col items-start justify-center gap-[8px]">
-          {loading ? (
-            <Skeleton variant="text" className="!min-w-[70px]" />
-          ) : (
-            <>
-              <p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">
-                {data.name}
-              </p>
-              <p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">
-                3 روز پیش
-              </p>
-            </>
-          )}
+          <p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">
+            {data.name}
+          </p>
+          <p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">
+            3 روز پیش
+          </p>
         </div>
       </div>
       <div className="mt-2">
-        {loading ? (
-          <>
-            <Skeleton variant="text" className="!w-full !mt-8" />
-            <Skeleton variant="text" className="!w-1/3" />
-          </>
-        ) : (
-          <p className="text-[#495057] text-[12px] md:text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">
-            {data.comment}
-          </p>
-        )}
+        <p className="text-[#495057] text-[12px] md:text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">
+          {data.comment}
+        </p>
         <div className="flex items-center justify-start mt-2 gap-[28px]">
           <div className="flex items-center justify-start gap-1">
             <div
@@ -83,19 +55,15 @@ function ItemUser({
                   data.is_like ? data.like - 1 : data.like + 1,
                   data,
                   "like",
-                  "is_like",
+                  "is_like"
                 )
               }
             >
               {data.is_like ? <BoldLikeComment /> : <LikeComment />}
             </div>
-            {loading ? (
-              <Skeleton variant="text" className="!min-w-[8px]" />
-            ) : (
-              <p className="text-[#6C757D] text-[12px] font-normal select-none">
-                {data.like}
-              </p>
-            )}
+            <p className="text-[#6C757D] text-[12px] font-normal select-none">
+              {data.like}
+            </p>
           </div>
           <div className="flex items-center justify-start gap-1">
             <div
@@ -105,19 +73,15 @@ function ItemUser({
                   data.is_dislike ? data.dislike - 1 : data.dislike + 1,
                   data,
                   "dislike",
-                  "is_dislike",
+                  "is_dislike"
                 )
               }
             >
               {data.is_dislike ? <BoldDisLikeComment /> : <DisLikeComment />}
             </div>
-            {loading ? (
-              <Skeleton variant="text" className="!min-w-[8px]" />
-            ) : (
-              <p className="text-[#6C757D] text-[12px] font-normal select-none">
-                {data.dislike}
-              </p>
-            )}
+            <p className="text-[#6C757D] text-[12px] font-normal select-none">
+              {data.dislike}
+            </p>
           </div>
           <Button
             className="!text-[#495057] !text-[12px] !font-medium"
@@ -164,8 +128,7 @@ function ItemUser({
           </div>
         )}
         <ul
-          className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12 
-                    ${loading && "w-full"}
+          className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12 w-full
                     ${data.is_open_reply ? "max-h-screen mt-12" : "max-h-0"}`}
         >
           {data.replays.map((item, idx) => (
@@ -174,7 +137,6 @@ function ItemUser({
               data={item}
               isReply={true}
               update={update}
-              loading={loading}
               setUpdate={setUpdate}
             />
           ))}
diff --git a/app/component/comment/index.js b/app/component/comment/index.js
index 241b215..a3e1016 100644
--- a/app/component/comment/index.js
+++ b/app/component/comment/index.js
@@ -2,7 +2,7 @@
 import { useState } from "react";
 import ItemUser from "./ItemUser";
 
-function Comment({ data, loading }) {
+function Comment({ data }) {
   const [list, setList] = useState(data?.comments);
   const [update, setUpdate] = useState(false);
 
@@ -21,7 +21,6 @@ function Comment({ data, loading }) {
             data={item}
             update={update}
             setList={setList}
-            loading={loading}
             setUpdate={setUpdate}
           />
         ))}
diff --git a/app/component/openLocation/Content.js b/app/component/openLocation/Content.js
index be2e047..14b9370 100644
--- a/app/component/openLocation/Content.js
+++ b/app/component/openLocation/Content.js
@@ -23,9 +23,16 @@ function Content({ handleClose }) {
       <span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
       <ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-auto flex-wrap md:flex-nowrap md:mx-[72px]">
         {maps.map((item, idx) => (
-          <li className="flex items-center flex-col justify-center gap-1">
+          <li
+            key={idx}
+            className="flex items-center flex-col justify-center gap-1"
+          >
             <Image
-              className="w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]"
+              className="
+                w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]
+                min-w-[32px] min-h-[32px] lg:min-w-[40px] lg:min-h-[40px]
+                max-w-[32px] max-h-[32px] lg:max-w-[40px] lg:max-h-[40px]
+              "
               src={item.src}
               alt="icon app"
               height={40}
diff --git a/components/blog/relatedContent/index.js b/components/blog/relatedContent/index.js
index fe9af35..1c4126f 100644
--- a/components/blog/relatedContent/index.js
+++ b/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>
diff --git a/components/blogs/Head.js b/components/blogs/Head.js
index 88b84ef..f057964 100644
--- a/components/blogs/Head.js
+++ b/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>
diff --git a/components/blogs/index.js b/components/blogs/index.js
index 2338f02..ec29a9e 100644
--- a/components/blogs/index.js
+++ b/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>
   );
 }
diff --git a/components/blogs/latestArticles/Article.js b/components/blogs/latestArticles/Article.js
index 1126a7e..d7b80c3 100644
--- a/components/blogs/latestArticles/Article.js
+++ b/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>
diff --git a/components/blogs/latestArticles/index.js b/components/blogs/latestArticles/index.js
index 95a2be7..0559dc5 100644
--- a/components/blogs/latestArticles/index.js
+++ b/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>
   );
diff --git a/components/clinic/components/about/ContentDetail.js b/components/clinic/components/about/ContentDetail.js
index a4807b0..84ab861 100644
--- a/components/clinic/components/about/ContentDetail.js
+++ b/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>
diff --git a/components/clinic/components/about/ListBime.js b/components/clinic/components/about/ListBime.js
index ed50139..04bdbb8 100644
--- a/components/clinic/components/about/ListBime.js
+++ b/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]"
diff --git a/components/clinic/components/about/Services.js b/components/clinic/components/about/Services.js
index 7385580..5830748 100644
--- a/components/clinic/components/about/Services.js
+++ b/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 
diff --git a/components/clinic/components/about/Specialties.js b/components/clinic/components/about/Specialties.js
index 104deab..a1c9e64 100644
--- a/components/clinic/components/about/Specialties.js
+++ b/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
diff --git a/components/clinic/components/about/images/Images.js b/components/clinic/components/about/images/Images.js
index 4154cab..5cd7fff 100644
--- a/components/clinic/components/about/images/Images.js
+++ b/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>
   );
 }
diff --git a/components/clinic/components/about/images/List.js b/components/clinic/components/about/images/List.js
index d2785d4..26c15ef 100644
--- a/components/clinic/components/about/images/List.js
+++ b/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={
diff --git a/components/clinic/components/about/images/Slider.js b/components/clinic/components/about/images/Slider.js
index d78b18b..9ce4cf3 100644
--- a/components/clinic/components/about/images/Slider.js
+++ b/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}
diff --git a/components/clinic/components/about/index.js b/components/clinic/components/about/index.js
index 3783f1c..7ad36e5 100644
--- a/components/clinic/components/about/index.js
+++ b/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>
   );
diff --git a/components/clinic/components/contact/ContentDetail.js b/components/clinic/components/contact/ContentDetail.js
index 81a2662..4d6812f 100644
--- a/components/clinic/components/contact/ContentDetail.js
+++ b/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>
diff --git a/components/clinic/components/contact/Detail.js b/components/clinic/components/contact/Detail.js
index 8fcc12b..655d841 100644
--- a/components/clinic/components/contact/Detail.js
+++ b/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>
   );
 }
diff --git a/components/clinic/components/contact/index.js b/components/clinic/components/contact/index.js
index 387a6af..171288c 100644
--- a/components/clinic/components/contact/index.js
+++ b/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"
diff --git a/components/clinic/components/doctors/List.js b/components/clinic/components/doctors/List.js
index afe2b33..3214c74 100644
--- a/components/clinic/components/doctors/List.js
+++ b/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">
diff --git a/components/clinic/components/doctors/index.js b/components/clinic/components/doctors/index.js
index b0f432f..c2324a7 100644
--- a/components/clinic/components/doctors/index.js
+++ b/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>
   );
 }
diff --git a/components/clinic/index.js b/components/clinic/index.js
index 4e6948c..e074738 100644
--- a/components/clinic/index.js
+++ b/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
diff --git a/components/clinics/index.js b/components/clinics/index.js
index 4199fa6..2baa2bb 100644
--- a/components/clinics/index.js
+++ b/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 (
diff --git a/components/doctor/detailDoctor/Title.js b/components/doctor/detailDoctor/Title.js
index 8516862..e6f680c 100644
--- a/components/doctor/detailDoctor/Title.js
+++ b/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 />
diff --git a/components/doctor/detailDoctor/cards/AboutDcotor.js b/components/doctor/detailDoctor/cards/AboutDcotor.js
index 05e557c..1cffee6 100644
--- a/components/doctor/detailDoctor/cards/AboutDcotor.js
+++ b/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>
diff --git a/components/doctor/detailDoctor/cards/comments/chart/ProgressAll.js b/components/doctor/detailDoctor/cards/comments/chart/ProgressAll.js
index 23d2e93..771cab1 100644
--- a/components/doctor/detailDoctor/cards/comments/chart/ProgressAll.js
+++ b/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}
diff --git a/components/doctor/detailDoctor/cards/comments/chart/index.js b/components/doctor/detailDoctor/cards/comments/chart/index.js
index b6e5ee3..71ca835 100644
--- a/components/doctor/detailDoctor/cards/comments/chart/index.js
+++ b/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>
   );
diff --git a/components/doctor/detailDoctor/cards/comments/index.js b/components/doctor/detailDoctor/cards/comments/index.js
index db73aff..ade705c 100644
--- a/components/doctor/detailDoctor/cards/comments/index.js
+++ b/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>
   );
 }
diff --git a/components/doctor/detailDoctor/cards/locations/index.js b/components/doctor/detailDoctor/cards/locations/index.js
index 57f29d1..77621ae 100644
--- a/components/doctor/detailDoctor/cards/locations/index.js
+++ b/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 && (
diff --git a/components/doctor/detailDoctor/index.js b/components/doctor/detailDoctor/index.js
index d861632..5492451 100644
--- a/components/doctor/detailDoctor/index.js
+++ b/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>
   );
 }
diff --git a/components/doctor/index.js b/components/doctor/index.js
index a73b35a..82b8ae9 100644
--- a/components/doctor/index.js
+++ b/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>
   );
diff --git a/services/response.js b/services/response.js
index 86d5237..c2406f9 100644
--- a/services/response.js
+++ b/services/response.js
@@ -30,4 +30,5 @@ export const request = {
     });
   },
   getUserProfile: (uuid) => api.get(`/api/v1/user-profile/${uuid}`),
+  
 };