Add progress bar and performance optimization

8 files changed, 34 insertions, 10 deletions

diff --git a/package.json b/package.json
index b64a34d7..da136fd0 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,10 @@
   "dependencies": {
     "axios": "^1.1.3",
     "next": "13.0.0",
+    "next-progress": "^2.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-lazy-load-image-component": "^1.5.5",
     "swiper": "^8.4.4"
   },
   "devDependencies": {
diff --git a/src/components/header.js b/src/components/header.js
index baebbd3a..3d5d0f84 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -3,6 +3,7 @@ import Link from "next/link";
 import ShoppingCartIcon from "../icons/shopping-cart.svg";
 import SearchIcon from "../icons/search.svg";
 import MenuIcon from "../icons/menu.svg";
+import ChevronRightIcon from "../icons/chevron-right.svg";
 import { useState } from "react";
 
 
@@ -23,19 +24,19 @@ export default function Header() {
           <Link className="flex w-full font-normal text-gray-800" href="/shop/brands">
               <span>Brand</span>
               <div className="ml-auto">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="stroke-gray-700 feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                <ChevronRightIcon className="stroke-gray-700" />
               </div>
           </Link>
           <Link className="flex w-full font-normal text-gray-800" href="/blog">
               <span>Blog</span>
               <div className="ml-auto">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="stroke-gray-700 feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                <ChevronRightIcon className="stroke-gray-700" />
               </div>
           </Link>
           <button className="flex w-full font-normal text-gray-800" id="open_category_parent_menu">
               <span>Kategori</span>
               <div className="ml-auto">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="stroke-gray-700 feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                <ChevronRightIcon className="stroke-gray-700" />
               </div>
           </button>
         </div>
diff --git a/src/components/productCard.js b/src/components/productCard.js
index 6e703670..f51473ad 100644
--- a/src/components/productCard.js
+++ b/src/components/productCard.js
@@ -1,13 +1,17 @@
 import Link from "next/link";
 import currencyFormat from "../helpers/currencyFormat";
 import { createSlug } from "../helpers/slug";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+
+import 'react-lazy-load-image-component/src/effects/blur.css';
+
 
 export default function productCard({ data }) {
   let product = data;
   return (
     <div className="product-card">
       <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="block">
-        <img src={product.image ? product.image : '/images/noimage.jpeg'} alt={product.name} className="product-card__image" loading="lazy" />
+        <LazyLoadImage effect="blur" src={product.image ? product.image : '/images/noimage.jpeg'} alt={product.name} className="product-card__image" />
       </Link>
       <div className="product-card__description">
         <div>
diff --git a/src/icons/chevron-right.svg b/src/icons/chevron-right.svg
new file mode 100644
index 00000000..fc5a76aa
--- /dev/null
+++ b/src/icons/chevron-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="feather feather-chevron-right">
+<polyline points="9 18 15 12 9 6"></polyline>
+</svg>
\ No newline at end of file
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>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 763a6d39..2e4ea975 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -217,4 +217,8 @@ html, body {
 
 .swiper-slide {
     @apply !h-auto;
+}
+
+.lazy-load-image-background {
+    @apply !block;
 }
\ No newline at end of file