From fbdcd34fc1dd5fce8c56c972e4f0658661435459 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Tue, 1 Oct 2024 13:55:00 +0700
Subject: optimize banner

---
 src/components/ui/HeroBanner.jsx          | 14 +++++++++++++-
 src/components/ui/HeroBannerSecondary.jsx | 12 ++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

(limited to 'src')

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
-- 
cgit v1.2.3