diff options
| author | it-fixcomart <it@fixcomart.co.id> | 2024-10-02 10:40:49 +0700 |
|---|---|---|
| committer | it-fixcomart <it@fixcomart.co.id> | 2024-10-02 10:40:49 +0700 |
| commit | ccb42e4cd91671d2dff6de30a16809756f83b35c (patch) | |
| tree | 0689f322d01d36a1db60b54adb117839e5730362 /src | |
| parent | 35c40c565730c80948a226d8de7478e6c3b86478 (diff) | |
| parent | 2e6ce4c69cd15066fb6af35c2d7bf92d4316c9c9 (diff) | |
Merge branch 'new-release' into Feature/switch-account
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/ui/HeroBanner.jsx | 14 | ||||
| -rw-r--r-- | src/components/ui/HeroBannerSecondary.jsx | 12 |
2 files changed, 21 insertions, 5 deletions
diff --git a/src/components/ui/HeroBanner.jsx b/src/components/ui/HeroBanner.jsx index 9a62465d..64838b85 100644 --- a/src/components/ui/HeroBanner.jsx +++ b/src/components/ui/HeroBanner.jsx @@ -39,16 +39,28 @@ const HeroBanner = () => { pagination: { dynamicBullets: false, clickable: true }, }; + const customLoader = ({ src }) => { + return src; // Loader yang mengembalikan URL gambar asli + }; + const BannerComponent = useMemo(() => { - return heroBanner.data?.map((banner, index) => ( + if (!heroBanner.data) return null; + + return heroBanner.data.map((banner, index) => ( <SwiperSlide key={index}> <Link href={banner.url} className='w-full h-auto'> <Image + loader={customLoader} src={banner.image} alt={banner.name} width={1152} height={768} className='w-full h-auto' + priority={index === 0} + loading={index === 0 ? 'eager' : 'lazy'} + placeholder="blur" + blurDataURL="/images/indoteknik-placeholder.png" + sizes="(max-width: 768px) 100vw, 50vw" /> </Link> </SwiperSlide> diff --git a/src/components/ui/HeroBannerSecondary.jsx b/src/components/ui/HeroBannerSecondary.jsx index b1023990..a7b32a4a 100644 --- a/src/components/ui/HeroBannerSecondary.jsx +++ b/src/components/ui/HeroBannerSecondary.jsx @@ -18,18 +18,22 @@ const HeroBannerSecondary = () => { if (heroBannerSecondary.isLoading) return <HeroBannerSkeleton /> return ( - heroBannerSecondary.data && ( - <Link href={heroBannerSecondary.data[randomIndex].url} className='h-full'> + heroBannerSecondary.data && randomIndex !== null && ( + <Link href={heroBannerSecondary.data[randomIndex].url} className="h-full"> <Image src={heroBannerSecondary.data[randomIndex].image} width={512} height={1024} alt={heroBannerSecondary.data[randomIndex].name} - className='object-cover object-center h-full' + className="object-cover object-center h-full" + loading="lazy" + placeholder="blur" + blurDataURL="/images/indoteknik-placeholder.png" + sizes="(max-width: 768px) 100vw, 50vw" /> </Link> ) - ) + ); } export default HeroBannerSecondary |
