3 files changed, 17 insertions, 14 deletions

diff --git a/src/components/elements/Image.js b/src/components/elements/Image.js
index e85237ed..26e85bee 100644
--- a/src/components/elements/Image.js
+++ b/src/components/elements/Image.js
@@ -1,13 +1,18 @@
-import { LazyLoadImage } from "react-lazy-load-image-component";
-import 'react-lazy-load-image-component/src/effects/opacity.css';
+import NextImage from "next/image";
+import { LazyLoadComponent } from "react-lazy-load-image-component";
 
 export default function Image({ src, alt, className = "" }) {
   return (
-    <LazyLoadImage 
-      effect="opacity"
-      src={src || '/images/noimage.jpeg'}
-      alt={src ? alt : 'Image Not Found - Indoteknik'}
-      className={className}
-    />
+    <LazyLoadComponent>
+      <div className="w-full h-full flex justify-center items-center">
+        <NextImage 
+          src={src || '/images/noimage.jpeg'}
+          alt={src ? alt : 'Image Not Found - Indoteknik'}
+          width={512}
+          height={512}
+          className={className}
+        />
+      </div>
+    </LazyLoadComponent>
   );
 }
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 56f0ff1c..ca501ecc 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -17,7 +17,6 @@ import ManufactureCard from "@/components/manufactures/ManufactureCard";
 import Footer from "@/components/layouts/Footer";
 import Image from "@/components/elements/Image";
 import ProductCategories from "@/components/products/ProductCategories";
-import { LazyLoadComponent } from "react-lazy-load-image-component";
 
 export async function getServerSideProps() {
   const heroBanners = await apiOdoo('GET', `/api/v1/banner?type=index-a-1`);
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index c3d34806..60849264 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -5,7 +5,6 @@ import Header from "@/components/layouts/Header";
 import apiOdoo from "@/core/utils/apiOdoo";
 import { createSlug, getIdFromSlug } from "@/core/utils/slug";
 import currencyFormat from "@/core/utils/currencyFormat";
-import ProductSlider from "@/components/products/ProductSlider";
 import Layout from "@/components/layouts/Layout";
 import { createOrUpdateItemCart } from "@/core/utils/cart";
 import toast from "react-hot-toast";
@@ -15,13 +14,13 @@ import LineDivider from "@/components/elements/LineDivider";
 import { HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid";
 import { useAuth } from "@/core/utils/auth";
 import { HeartIcon } from "@heroicons/react/24/outline";
-import { LazyLoadComponent } from "react-lazy-load-image-component";
+import LazyLoad from "react-lazy-load";
 import ProductSimilar from "@/components/products/ProductSimilar";
 
 export async function getServerSideProps( context ) {
   const { slug } = context.query;
   let product = await apiOdoo('GET', '/api/v1/product/' + getIdFromSlug(slug));
-  if (product.length == 1) {
+  if (product?.length == 1) {
     product = product[0];
     product.description = product.description.replaceAll('<p>', '||p||');
     product.description = product.description.replaceAll('</p>', '||/p||');
@@ -274,9 +273,9 @@ export default function ProductDetail({ product }) {
 
         <LineDivider />
         
-        <LazyLoadComponent>
+        <LazyLoad>
           <ProductSimilar productId={getIdFromSlug(slug || '')} />
-        </LazyLoadComponent>
+        </LazyLoad>
         
         <Footer />
       </Layout>