summaryrefslogtreecommitdiff
path: root/src/lib/home
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/home')
-rw-r--r--src/lib/home/components/BannerSection.jsx1
-rw-r--r--src/lib/home/components/CategoryDynamic.jsx178
-rw-r--r--src/lib/home/components/CategoryDynamicMobile.jsx2
-rw-r--r--src/lib/home/components/PromotionProgram.jsx59
-rw-r--r--src/lib/home/components/ServiceList.jsx6
5 files changed, 125 insertions, 121 deletions
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'
/>
</Link>
))}
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index cc4f42b7..b6994f60 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,105 @@ 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'
+ 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'>
+ {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'
+ 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'>
+ {childCategory.name}
+ </h3>
+ </div>
+ </Link>
+ </div>
+ </LazyLoadComponent>
+ )
+ )}
+ </div>
+ </div>
</div>
- </div>
- </div>
- </SwiperSlide>
- ))}
- </Swiper>
- </div>
+ </SwiperSlide>
+ </LazyLoadComponent>
+ ))}
+ </Swiper>
+ </div>
+ </LazyLoadComponent>
</Skeleton>
))}
</div>
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'
/>
<div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'>
<h2 className='font-semibold text-[10px] line-clamp-1'>
@@ -123,6 +124,7 @@ const CategoryDynamicMobile = () => {
width={40}
height={40}
className='p-2'
+ loading='eager'
/>
<div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'>
<h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index 562fa138..d8bf3edb 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 <BannerPromoSkeleton />;
- // }
- if (!data) {
+ if (isLoading) {
return <BannerPromoSkeleton />;
}
@@ -90,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'
/>
</Link>
))}
@@ -103,12 +83,13 @@ const BannerSection = () => {
<SwiperSlide key={banner.id}>
<Link key={banner.id} href={banner.url}>
<Image
- width={439}
- height={150}
- quality={85}
+ width={350}
+ height={100}
+ quality={70}
src={banner.image}
alt={banner.name}
- className='h-auto w-full rounded '
+ className='rounded '
+ loading='eager'
/>
</Link>
</SwiperSlide>
diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx
index b3cc8fe5..e32e8747 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'
/>
</div>
<div className=''>
@@ -43,6 +44,7 @@ const ServiceList = () => {
src='/images/icon_service/WARRANTY.svg'
alt=''
className='h-20 w-20 rounded'
+ loading='eager'
/>
</div>
<div>
@@ -57,7 +59,7 @@ const ServiceList = () => {
</div>
<div className='w-full '>
<Link
- href='/pembayaran-tempo'
+ href='/pembayaran-tempo-detail'
className='border border-gray-200 p-2 flex items-center gap-x-2 rounded-lg'
>
<div className=''>
@@ -68,6 +70,7 @@ const ServiceList = () => {
src='/images/icon_service/DUE-PAYMENT.svg'
alt=''
className='h-20 w-20 rounded'
+ loading='eager'
/>
</div>
<div>
@@ -93,6 +96,7 @@ const ServiceList = () => {
src='/images/icon_service/TAX.svg'
alt=''
className='h-20 w-20 rounded'
+ loading='eager'
/>
</div>
<div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 06:08:31 +0000