From 58bd0bad3ba10720b59fd3de11e34483365289d5 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 25 Sep 2023 13:14:25 +0700
Subject: Add opacity and eager loading on image

---
 src/core/components/elements/Image/Image.jsx | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/core/components/elements/Image/Image.jsx')

diff --git a/src/core/components/elements/Image/Image.jsx b/src/core/components/elements/Image/Image.jsx
index ba6bf50d..1562444c 100644
--- a/src/core/components/elements/Image/Image.jsx
+++ b/src/core/components/elements/Image/Image.jsx
@@ -15,8 +15,10 @@ const Image = ({ ...props }) => (
       {...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'
     />
   </>
 )
-- 
cgit v1.2.3


From 2471cde6bdfbcc3bbc76f26656fdc79bd1f6bdb1 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 26 Sep 2023 09:33:01 +0700
Subject: Update Image component with next image

---
 src/core/components/elements/Image/Image.jsx | 45 ++++++++++++++++++----------
 1 file changed, 29 insertions(+), 16 deletions(-)

(limited to 'src/core/components/elements/Image/Image.jsx')

diff --git a/src/core/components/elements/Image/Image.jsx b/src/core/components/elements/Image/Image.jsx
index 1562444c..be275e8d 100644
--- a/src/core/components/elements/Image/Image.jsx
+++ b/src/core/components/elements/Image/Image.jsx
@@ -1,5 +1,6 @@
-import { LazyLoadImage } from 'react-lazy-load-image-component'
-import 'react-lazy-load-image-component/src/effects/opacity.css'
+import NextImage from 'next/image'
+import { useState } from 'react'
+import classNames from 'classnames'
 
 /**
  * The `Image` component is used to display lazy-loaded images.
@@ -9,20 +10,32 @@ import 'react-lazy-load-image-component/src/effects/opacity.css'
  * @param {string} props.alt - Alternative text to be displayed if the image is not found.
  * @returns {JSX.Element} - Rendered `Image` component.
  */
-const Image = ({ ...props }) => (
-  <>
-    <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'
-    />
-  </>
-)
+const Image = ({ ...props }) => {
+  const [isLoading, setIsLoading] = useState(true)
 
-Image.defaultProps = LazyLoadImage.defaultProps
+  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)}
+      />
+    </>
+  )
+}
 
 export default Image
-- 
cgit v1.2.3


From 8402f53f80fe34dc926b9eebaab143884294cdb0 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 26 Sep 2023 10:10:35 +0700
Subject: Revert Image with Next Image to React Lazy Load

---
 src/core/components/elements/Image/Image.jsx | 37 +++++++++-------------------
 1 file changed, 11 insertions(+), 26 deletions(-)

(limited to 'src/core/components/elements/Image/Image.jsx')

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'
+    />
   )
 }
 
-- 
cgit v1.2.3

