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

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}
             />
           ))}

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}
           />
         ))}