Add progress bar and performance optimization

1 files changed, 5 insertions, 3 deletions

diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index 519f8160..2ff151fa 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -1,15 +1,17 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import Header from "../../../components/header";
-import ProductCard from "../../../components/productCard";
+import Header from "../../../components/Header";
+import ProductCard from "../../../components/ProductCard";
 import { getOdoo } from "../../../helpers/apiOdoo";
 import { createSlug, getId } from "../../../helpers/slug";
 import currencyFormat from "../../../helpers/currencyFormat";
 import Head from "next/head";
 import { Swiper, SwiperSlide } from "swiper/react";
+import { LazyLoadImage } from "react-lazy-load-image-component";
 
 import 'swiper/css';
+import 'react-lazy-load-image-component/src/effects/blur.css';
 
 
 export async function getServerSideProps(context) {
@@ -78,7 +80,7 @@ export default function ProductDetail({product, similarProducts}) {
       </Head>
       <Header />
       <div className="px-4 pt-5 pb-10">
-        <img src={product.image} alt={product.name} className="border border-gray-300 rounded-md mb-4 w-full h-[300px] object-contain object-center" />
+        <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border border-gray-300 rounded-md mb-4 w-full h-[300px] object-contain object-center" />
         <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}>
           {product.manufacture.name || '-'}
         </Link>