summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/lib/home/components/CategoryDynamic.jsx176
-rw-r--r--src/lib/home/components/PromotionProgram.jsx47
-rw-r--r--src/pages/index.jsx13
3 files changed, 111 insertions, 125 deletions
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>
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 <BannerPromoSkeleton />;
- // }
- if (!data) {
+ if (isLoading) {
return <BannerPromoSkeleton />;
}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 2ec1231a..e685b382 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -16,7 +16,7 @@ import CategoryPilihan from '../lib/home/components/CategoryPilihan';
// import { getAuth } from '~/libs/auth';
const BasicLayout = dynamic(() =>
- import('@/core/components/layouts/BasicLayout'),{ssr: false}
+ import('@/core/components/layouts/BasicLayout')
);
const HeroBanner = dynamic(() => import('@/components/ui/HeroBanner'), {
loading: () => <HeroBannerSkeleton />,
@@ -40,24 +40,17 @@ const PreferredBrand = dynamic(
const FlashSale = dynamic(
() => import('@/lib/flashSale/components/FlashSale'),
- {
- loading: () => <FlashSaleSkeleton />,
- }
);
const ProgramPromotion = dynamic(
- () => import('@/lib/home/components/PromotionProgram'),
- {
- loading: () => <BannerPromoSkeleton />,
- }
+ () => import('@/lib/home/components/PromotionProgram')
);
const BannerSection = dynamic(() =>
import('@/lib/home/components/BannerSection')
);
const CategoryHomeId = dynamic(
- () => import('@/lib/home/components/CategoryHomeId'),
- { ssr: false }
+ () => import('@/lib/home/components/CategoryHomeId')
);
const CategoryDynamic = dynamic(() =>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 00:28:19 +0000