Add progress bar and performance optimization

3 files changed, 16 insertions, 6 deletions

diff --git a/src/pages/_app.js b/src/pages/_app.js
index 1e1cec92..7062d23c 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -1,7 +1,15 @@
-import '../styles/globals.css'
+import '../styles/globals.css';
+import NextProgress from 'next-progress';
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+    <>
+      <NextProgress color="#D7A30A" options={{
+        showSpinner: false,
+      }} />
+      <Component {...pageProps} />
+    </>
+  )
 }
 
 export default MyApp
diff --git a/src/pages/index.js b/src/pages/index.js
index 57f96ec9..b91c99e7 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import Header from "../components/header";
+import Header from "../components/Header";
 
 export default function Home() {
   const [product, setProduct] = useState({});
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>