Add progress bar and performance optimization

1 files changed, 5 insertions, 1 deletions

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>