add loading all page & change bugs

components/blog/relatedContent/Item.js

@@ -1,31 +1,40 @@
+import CircularLoading from "@/app/component/loading/Circular";
+import CustomLoading from "@/app/component/loading/Custom";
+import TextLoading from "@/app/component/loading/Text";
 import Image from "next/image";
 import Link from "next/link";
 
-function Item({ data, idx }) {
+function Item({ data, idx, loading }) {
     return (
         <li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
-            <Link href={`/blog/${data.id}`}>
-                <Image
-                    className="
+            <CustomLoading width={80} height={72} loading={loading}>
+                <Link href={`/blog/${data.id}`}>
+                    <Image
+                        className="
                         min-w-[64px] sm:min-w-[73px] md:min-w-[85px] lg:min-w-[97px] 
                         min-h-[56px] sm:min-h-[64px] md:min-h-[75px] lg:min-h-[88px] 
                         rounded-[8px] overflow-hidden object-cover
                     "
-                    src={data.src}
-                    alt="article"
-                    height={88}
-                    width={97}
-                />
-            </Link>
-            <div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
-                <Link href={`/blog/${data.id}`}>
-                    <p
-                        className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap"
-                    >{data.title}</p>
+                        src={data.src}
+                        alt="article"
+                        height={88}
+                        width={97}
+                    />
                 </Link>
-                <p
-                    className="text-[#9B9B9B] text-[12px] text-nowrap font-normal"
-                >تاریخ انتشار: {data.date_of_release}</p>
+            </CustomLoading>
+            <div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
+                <TextLoading width={150} height={18} loading={loading}>
+                    <Link href={`/blog/${data.id}`}>
+                        <p
+                            className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap"
+                        >{data.title}</p>
+                    </Link>
+                </TextLoading>
+                <TextLoading width={110} height={18} loading={loading}>
+                    <p
+                        className="text-[#9B9B9B] text-[12px] text-nowrap font-normal"
+                    >تاریخ انتشار: {data.date_of_release}</p>
+                </TextLoading>
             </div>
             {data.id > idx + 1 && (
                 <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>

components/blog/relatedContent/index.js

@@ -3,7 +3,7 @@ import UnderlineLG from '@/components/icons/UnderlineLG'
 import React from 'react'
 import Item from './Item'
 
-function RelatedContent({ data }) {
+function RelatedContent({ data, loading }) {
   return (
     <div className='p-[12px] w-full lg:w-fit md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]'>
       <AnimationTextHead name='fade-up' text='مطالب مرتبط'>
@@ -15,6 +15,7 @@ function RelatedContent({ data }) {
             idx={idx}
             data={item}
             key={item.id}
+            loading={loading}
           />
         ))}
       </ul>