add loading all page & change bugs

components/blog/detail/Caption.js

@@ -1,31 +1,45 @@
+import CustomLoading from '@/app/component/loading/Custom'
+import MultilineLoading from '@/app/component/loading/Multiline'
 import Image from 'next/image'
 import React from 'react'
 
-function Caption({ data }) {
+function Caption({ data, loading }) {
     return (
         <>
-            <Image
-                className="rounded-[8px] overflow-hidden w-full"
-                src={data.cover_first}
-                alt="cover-blog"
-                height={570}
-                width={808}
-            />
-            <div
-                className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
-                dangerouslySetInnerHTML={{ __html: data.caption }}
-            />
-            <Image
-                className="rounded-[8px] overflow-hidden w-full"
-                src={data.cover_second}
-                alt="cover-blog"
-                height={570}
-                width={808}
-            />
-            <div
-                className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
-                dangerouslySetInnerHTML={{ __html: data.caption }}
-            />
+            <CustomLoading loading={loading} width='full' height={500}>
+                <Image
+                    className="rounded-[8px] overflow-hidden w-full"
+                    src={data.cover_first}
+                    alt="cover-blog"
+                    height={570}
+                    width={808}
+                />
+            </CustomLoading>
+            <div className={loading ? 'my-4' : ''}>
+                <MultilineLoading loading={loading} width='full' height={18} line={20}>
+                    <div
+                        className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
+                        dangerouslySetInnerHTML={{ __html: data.caption }}
+                    />
+                </MultilineLoading>
+            </div>
+            <CustomLoading loading={loading} width='full' height={500}>
+                <Image
+                    className="rounded-[8px] overflow-hidden w-full"
+                    src={data.cover_second}
+                    alt="cover-blog"
+                    height={570}
+                    width={808}
+                />
+            </CustomLoading>
+            <div className={loading ? 'my-4' : ''}>
+                <MultilineLoading loading={loading} width='full' height={18} line={20}>
+                    <div
+                        className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
+                        dangerouslySetInnerHTML={{ __html: data.caption }}
+                    />
+                </MultilineLoading>
+            </div>
         </>
     )
 }

components/blog/detail/SocialMedia.js

@@ -1,3 +1,4 @@
+import CircularLoading from "@/app/component/loading/Circular"
 import LinkedinB from "@/components/icons/LinkedinB"
 import TelegramB from "@/components/icons/TelegramB"
 import WhatsappB from "@/components/icons/WhatsappB"
@@ -8,16 +9,18 @@ const socials = [
     <LinkedinB />
 ]
 
-function SocialMedia() {
+function SocialMedia({ loading }) {
     return (
         <ul className="flex mt-0 sm:mt-[3px] md:mt-[6px] lg:mt-[8px] pb-[16px] sm:pb-[21px] md:pb-[27px] lg:pb-[32px] relative items-center justify-end gap-4">
             {socials.map((item, idx) => (
-                <li
-                    key={idx}
-                    className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
-                >
-                    {item}
-                </li>
+                <CircularLoading width={36} height={36} loading={loading}>
+                    <li
+                        key={idx}
+                        className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
+                    >
+                        {item}
+                    </li>
+                </CircularLoading>
             ))}
             <span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
         </ul>

components/blog/detail/commentUser/index.js

@@ -4,14 +4,14 @@ import Underline from '@/components/icons/Underline'
 import React from 'react'
 import AddComment from './AddComment'
 
-function CommentUser({ data }) {
+function CommentUser({ data, loading }) {
     return (
         <div className='mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]'>
             <AnimationTextHead name='zoom-in-up' text='نظرات'>
                 <Underline />
             </AnimationTextHead>
             <AddComment />
-            <Comment data={data} />
+            <Comment data={data} loading={loading} />
         </div>
     )
 }

components/blog/detail/index.js

@@ -2,12 +2,12 @@ import Caption from "./Caption";
 import SocialMedia from "./SocialMedia";
 import CommentUser from "./commentUser";
 
-function Detail({ data }) {
+function Detail({ data, loading }) {
     return (
         <div className="w-full lg:w-[68%]">
-            <Caption data={data} />
-            <SocialMedia />
-            <CommentUser data={data} />
+            <Caption data={data} loading={loading} />
+            <SocialMedia loading={loading} />
+            <CommentUser data={data} loading={loading} />
         </div>
     )
 }