Revert Image with Next Image to React Lazy Load

2 files changed, 11 insertions, 27 deletions

diff --git a/src/core/components/elements/Image/Image.jsx b/src/core/components/elements/Image/Image.jsx
index be275e8d..d7b19821 100644
--- a/src/core/components/elements/Image/Image.jsx
+++ b/src/core/components/elements/Image/Image.jsx
@@ -1,6 +1,5 @@
-import NextImage from 'next/image'
-import { useState } from 'react'
-import classNames from 'classnames'
+import { LazyLoadImage } from 'react-lazy-load-image-component'
+import 'react-lazy-load-image-component/src/effects/opacity.css'
 
 /**
  * The `Image` component is used to display lazy-loaded images.
@@ -11,30 +10,16 @@ import classNames from 'classnames'
  * @returns {JSX.Element} - Rendered `Image` component.
  */
 const Image = ({ ...props }) => {
-  const [isLoading, setIsLoading] = useState(true)
-
-  const imageClassNames = classNames(
-    'duration-500 ease-in-out',
-    {
-      'blur-2xl grayscale': isLoading,
-      'blur-0 grayscale-0': !isLoading
-    },
-    props.className
-  )
-
   return (
-    <>
-      <NextImage
-        {...props}
-        src={props.src || '/images/noimage.jpeg'}
-        alt={props.src ? props.alt : 'Image Not Found - Indoteknik'}
-        key={props.src || '/images/noimage.jpeg'}
-        className={imageClassNames}
-        width={256}
-        height={256}
-        onLoadingComplete={() => setIsLoading(false)}
-      />
-    </>
+    <LazyLoadImage
+      {...props}
+      src={props.src || '/images/noimage.jpeg'}
+      placeholderSrc='/images/indoteknik-placeholder.png'
+      effect='opacity'
+      alt={props.src ? props.alt : 'Image Not Found - Indoteknik'}
+      wrapperClassName='bg-white'
+      loading='eager'
+    />
   )
 }
 
diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index 2f8101b0..54f209cc 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -52,7 +52,6 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
       {bannerMode && (
         <div ref={bannerRef}>
           <Image
-            ref={bannerRef}
             src={products.banner.image}
             alt={products.banner.name}
             style={{ opacity: 1 }}