From d324d01bb9413a023a158a7bd15ba36bb7beb9bc Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Fri, 29 Nov 2024 14:38:24 +0700
Subject: update performance

---
 src/lib/home/components/CategoryDynamic.jsx | 176 +++++++++++++++-------------
 1 file changed, 95 insertions(+), 81 deletions(-)

(limited to 'src/lib/home/components/CategoryDynamic.jsx')

diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index cc4f42b7..d72fe1f1 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -9,6 +9,7 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import { Pagination } from 'swiper';
+import { LazyLoadComponent } from 'react-lazy-load-image-component';
 
 const CategoryDynamic = () => {
   const [categoryManagement, setCategoryManagement] = useState([]);
@@ -22,12 +23,17 @@ const CategoryDynamic = () => {
       if (data) {
         setCategoryManagement(data);
       }
-      setIsLoading(false);
     };
 
     fetchCategoryData();
   }, []);
 
+  useEffect(() => {
+    if (categoryManagement?.length > 0) {
+      setIsLoading(false);
+    }
+  }, [categoryManagement]);
+
   const swiperBanner = {
     modules: [Pagination],
     classNames: 'mySwiper',
@@ -44,95 +50,103 @@ const CategoryDynamic = () => {
       {categoryManagement &&
         categoryManagement.map((category) => (
           <Skeleton key={category.id} isLoaded={!isLoading}>
-            <div key={category.id}>
-              <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
-                <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
-                  {category.name}
-                </h1>
-                <Link
-                  href={createSlug(
-                    '/shop/category/',
-                    category?.name,
-                    category?.category_id
-                  )}
-                  className='!text-red-500 font-semibold'
-                >
-                  Lihat Semua
-                </Link>
-              </div>
+            <LazyLoadComponent key={category.id}>
+              <div key={category.id}>
+                <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
+                  <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
+                    {category.name}
+                  </h1>
+                  <Link
+                    href={createSlug(
+                      '/shop/category/',
+                      category?.name,
+                      category?.category_id
+                    )}
+                    className='!text-red-500 font-semibold'
+                  >
+                    Lihat Semua
+                  </Link>
+                </div>
 
-              <Swiper {...swiperBanner}>
-                {category?.categories?.map((subCategory) => (
-                  <SwiperSlide key={subCategory.id}>
-                    <div className='border rounded justify-start items-start '>
-                      <div className='p-3'>
-                        <div className='flex flex-row border rounded mb-2 justify-start items-center'>
-                          <NextImage
-                            src={
-                              subCategory.image
-                                ? subCategory.image
-                                : '/images/noimage.jpeg'
-                            }
-                            alt={subCategory.name}
-                            width={90}
-                            height={30}
-                            className='object-fit p-4'
-                          />
-                          <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
-                            <h2 className='font-semibold text-lg mr-2'>
-                              {subCategory?.name}
-                            </h2>
-                            <Link
-                              href={createSlug(
-                                '/shop/category/',
-                                subCategory?.name,
-                                subCategory?.id_level_2
-                              )}
-                              className='!text-red-500 font-semibold'
-                            >
-                              Lihat Semua
-                            </Link>
-                          </div>
-                        </div>
-                        <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px] min-h-[240px] content-start'>
-                          {subCategory.child_frontend_id_i.map(
-                            (childCategory) => (
-                              <div key={childCategory.id} className=''>
+                <Swiper {...swiperBanner}>
+                  {category?.categories?.map((subCategory) => (
+                    <LazyLoadComponent key={subCategory.id}>
+                      <SwiperSlide key={subCategory.id}>
+                        <div className='border rounded justify-start items-start '>
+                          <div className='p-3'>
+                            <div className='flex flex-row border rounded mb-2 justify-start items-center'>
+                              <NextImage
+                                src={
+                                  subCategory.image
+                                    ? subCategory.image
+                                    : '/images/noimage.jpeg'
+                                }
+                                alt={subCategory.name}
+                                width={90}
+                                height={30}
+                                className='object-fit p-4'
+                              />
+                              <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
+                                <h2 className='font-semibold text-lg mr-2'>
+                                  {subCategory?.name}
+                                </h2>
                                 <Link
                                   href={createSlug(
                                     '/shop/category/',
-                                    childCategory?.name,
-                                    childCategory?.id_level_3
+                                    subCategory?.name,
+                                    subCategory?.id_level_2
                                   )}
-                                  className='flex flex-row gap-2 border rounded group hover:border-red-500'
+                                  className='!text-red-500 font-semibold'
                                 >
-                                  <NextImage
-                                    src={
-                                      childCategory.image
-                                        ? childCategory.image
-                                        : '/images/noimage.jpeg'
-                                    }
-                                    alt={childCategory.name}
-                                    className='p-2 ml-1'
-                                    width={40}
-                                    height={40}
-                                  />
-                                  <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
-                                    <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
-                                      {childCategory.name}
-                                    </h3>
-                                  </div>
+                                  Lihat Semua
                                 </Link>
                               </div>
-                            )
-                          )}
+                            </div>
+                            <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px] min-h-[240px] content-start'>
+                              {subCategory.child_frontend_id_i.map(
+                                (childCategory) => (
+                                  <LazyLoadComponent key={childCategory.id}>
+                                    <div key={childCategory.id} className=''>
+                                      <Link
+                                        href={createSlug(
+                                          '/shop/category/',
+                                          childCategory?.name,
+                                          childCategory?.id_level_3
+                                        )}
+                                        className='flex flex-row gap-2 border rounded group hover:border-red-500'
+                                      >
+                                        <NextImage
+                                          src={
+                                            childCategory.image
+                                              ? childCategory.image
+                                              : '/images/noimage.jpeg'
+                                          }
+                                          alt={childCategory.name}
+                                          className='p-2 ml-1'
+                                          width={40}
+                                          height={40}
+                                          placeholder='blur'
+                                          blurDataURL='/icon.jpg'
+                                        />
+                                        <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
+                                          <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
+                                            {childCategory.name}
+                                          </h3>
+                                        </div>
+                                      </Link>
+                                    </div>
+                                  </LazyLoadComponent>
+                                )
+                              )}
+                            </div>
+                          </div>
                         </div>
-                      </div>
-                    </div>
-                  </SwiperSlide>
-                ))}
-              </Swiper>
-            </div>
+                      </SwiperSlide>
+                    </LazyLoadComponent>
+                  ))}
+                </Swiper>
+              </div>
+            </LazyLoadComponent>
           </Skeleton>
         ))}
     </div>
-- 
cgit v1.2.3


From 1b4d7f65ee08a56ca6cc57bfc6336ca3ccad3a21 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Tue, 3 Dec 2024 14:42:36 +0700
Subject: update performance desktop

---
 src/lib/home/components/CategoryDynamic.jsx | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/lib/home/components/CategoryDynamic.jsx')

diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index d72fe1f1..b6994f60 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -85,6 +85,7 @@ const CategoryDynamic = () => {
                                 width={90}
                                 height={30}
                                 className='object-fit p-4'
+                                loading='eager'
                               />
                               <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
                                 <h2 className='font-semibold text-lg mr-2'>
@@ -127,6 +128,7 @@ const CategoryDynamic = () => {
                                           height={40}
                                           placeholder='blur'
                                           blurDataURL='/icon.jpg'
+                                          loading='eager'
                                         />
                                         <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
                                           <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
-- 
cgit v1.2.3