From d324d01bb9413a023a158a7bd15ba36bb7beb9bc Mon Sep 17 00:00:00 2001 From: trisusilo48 Date: Fri, 29 Nov 2024 14:38:24 +0700 Subject: update performance --- src/lib/home/components/CategoryDynamic.jsx | 176 +++++++++++++++------------ src/lib/home/components/PromotionProgram.jsx | 47 ++----- 2 files changed, 108 insertions(+), 115 deletions(-) (limited to 'src/lib/home') 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) => ( -
-
-

- {category.name} -

- - Lihat Semua - -
+ +
+
+

+ {category.name} +

+ + Lihat Semua + +
- - {category?.categories?.map((subCategory) => ( - -
-
-
- -
-

- {subCategory?.name} -

- - Lihat Semua - -
-
-
- {subCategory.child_frontend_id_i.map( - (childCategory) => ( -
+ + {category?.categories?.map((subCategory) => ( + + +
+
+
+ +
+

+ {subCategory?.name} +

- -
-

- {childCategory.name} -

-
+ Lihat Semua
- ) - )} +
+
+ {subCategory.child_frontend_id_i.map( + (childCategory) => ( + +
+ + +
+

+ {childCategory.name} +

+
+ +
+ + ) + )} +
+
-
-
- - ))} - -
+ + + ))} + +
+ ))}
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx index 562fa138..fc23bf78 100644 --- a/src/lib/home/components/PromotionProgram.jsx +++ b/src/lib/home/components/PromotionProgram.jsx @@ -4,56 +4,35 @@ import { bannerApi } from '@/api/bannerApi'; import useDevice from '@/core/hooks/useDevice'; import { Swiper, SwiperSlide } from 'swiper/react'; import BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton'; + import { useEffect, useState } from 'react'; const { useQuery } = require('react-query'); const BannerSection = () => { const { isMobile, isDesktop } = useDevice(); const [data, setData] = useState(null); const [shouldFetch, setShouldFetch] = useState(false); + const [ isLoading, setIsLoading] = useState(true); useEffect(() => { const fetchData = async () => { - const res = await fetch(`/api/hero-banner?type=banner-promotion`); - const { data } = await res.json(); - if (data) { - setData(data); + try { + const res = await fetch(`/api/hero-banner?type=banner-promotion`); + const { data } = await res.json(); + if (data) { + setData(data); + } + } catch (e) { + console.log(e); + } finally { + setIsLoading(false); } }; fetchData(); }, []); - // useEffect(() => { - // const localData = localStorage.getItem('Homepage_promotionProgram'); - // if (localData) { - // setData(JSON.parse(localData)); - // } else { - // setShouldFetch(true); - // } - // }, []); - - // const getPromotionProgram = useQuery( - // 'promotionProgram', - // bannerApi({ type: 'banner-promotion' }), - // { - // enabled: shouldFetch, - // onSuccess: (data) => { - // if (data) { - // localStorage.setItem( - // 'Homepage_promotionProgram', - // JSON.stringify(data) - // ); - // setData(data); - // } - // }, - // } - // ); - const promotionProgram = data; - // if (getPromotionProgram?.isLoading && !data) { - // return ; - // } - if (!data) { + if (isLoading) { return ; } -- cgit v1.2.3 From 1b4d7f65ee08a56ca6cc57bfc6336ca3ccad3a21 Mon Sep 17 00:00:00 2001 From: trisusilo48 Date: Tue, 3 Dec 2024 14:42:36 +0700 Subject: update performance desktop --- src/lib/home/components/BannerSection.jsx | 1 + src/lib/home/components/CategoryDynamic.jsx | 2 ++ src/lib/home/components/CategoryDynamicMobile.jsx | 2 ++ src/lib/home/components/PromotionProgram.jsx | 12 +++++++----- src/lib/home/components/ServiceList.jsx | 4 ++++ 5 files changed, 16 insertions(+), 5 deletions(-) (limited to 'src/lib/home') diff --git a/src/lib/home/components/BannerSection.jsx b/src/lib/home/components/BannerSection.jsx index 303b5c4b..898f1bf5 100644 --- a/src/lib/home/components/BannerSection.jsx +++ b/src/lib/home/components/BannerSection.jsx @@ -51,6 +51,7 @@ const BannerSection = () => { src={banner.image} alt={banner.name} className='h-auto w-full rounded' + loading='eager' /> ))} 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' />

@@ -127,6 +128,7 @@ const CategoryDynamic = () => { height={40} placeholder='blur' blurDataURL='/icon.jpg' + loading='eager' />

diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx index 67ae6f5f..5d9e872c 100644 --- a/src/lib/home/components/CategoryDynamicMobile.jsx +++ b/src/lib/home/components/CategoryDynamicMobile.jsx @@ -90,6 +90,7 @@ const CategoryDynamicMobile = () => { width={30} height={30} className='' + loading='eager' />

@@ -123,6 +124,7 @@ const CategoryDynamicMobile = () => { width={40} height={40} className='p-2' + loading='eager' />

diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx index fc23bf78..d8bf3edb 100644 --- a/src/lib/home/components/PromotionProgram.jsx +++ b/src/lib/home/components/PromotionProgram.jsx @@ -69,7 +69,8 @@ const BannerSection = () => { quality={85} src={banner.image} alt={banner.name} - className='h-auto w-full rounded hover:scale-105 transition duration-500 ease-in-out' + className='rounded hover:scale-105 transition duration-500 ease-in-out' + loading='eager' /> ))} @@ -82,12 +83,13 @@ const BannerSection = () => { {banner.name} diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx index b3cc8fe5..6d03a587 100644 --- a/src/lib/home/components/ServiceList.jsx +++ b/src/lib/home/components/ServiceList.jsx @@ -18,6 +18,7 @@ const ServiceList = () => { src='/images/icon_service/ONE-STOP-SOLUTIONS.svg' alt='' className='h-20 w-20 rounded' + loading='eager' />

@@ -43,6 +44,7 @@ const ServiceList = () => { src='/images/icon_service/WARRANTY.svg' alt='' className='h-20 w-20 rounded' + loading='eager' />
@@ -68,6 +70,7 @@ const ServiceList = () => { src='/images/icon_service/DUE-PAYMENT.svg' alt='' className='h-20 w-20 rounded' + loading='eager' />
@@ -93,6 +96,7 @@ const ServiceList = () => { src='/images/icon_service/TAX.svg' alt='' className='h-20 w-20 rounded' + loading='eager' />
-- cgit v1.2.3 From 141e9113c7dc4483ab049137b4e4ac731657cfb0 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 10 Dec 2024 13:40:28 +0700 Subject: update code --- src/lib/home/components/ServiceList.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/lib/home') diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx index 6d03a587..e32e8747 100644 --- a/src/lib/home/components/ServiceList.jsx +++ b/src/lib/home/components/ServiceList.jsx @@ -59,7 +59,7 @@ const ServiceList = () => {
-- cgit v1.2.3