Add progress bar and performance optimization

2 files changed, 9 insertions, 4 deletions

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>