#93 frontend

frontend/package.json

@@ -34,6 +34,7 @@
     "react-helmet-async": "^1.3.0",
     "react-hot-toast": "^2.2.0",
     "react-icons": "^4.3.1",
+    "react-lazy-load-image-component": "^1.5.5",
     "react-paypal-express-checkout": "^1.0.5",
     "react-phone-number-input": "^3.1.50",
     "react-redux": "^7.2.6",

frontend/src/index.js

@@ -4,6 +4,8 @@ import "react-phone-number-input/style.css";
 import { Provider } from "react-redux";
 import { BrowserRouter as Router } from "react-router-dom";
 import "react-toastify/dist/ReactToastify.css";
+import "react-lazy-load-image-component/src/effects/blur.css";
+import "react-lazy-load-image-component/src/effects/opacity.css";
 import App from "./App";
 import "./index.css";
 import reportWebVitals from "./reportWebVitals";

frontend/src/v1/user_ui/custom_hook/Lazy_Load_Img.js

@@ -1,5 +1,7 @@
 import React, { useEffect, useRef } from "react";
-const Lazy_Load_Img = ({ url, style }) => {
+import { LazyLoadImage, trackWindowScroll } from "react-lazy-load-image-component";
+import { comment_png } from "../imports/Assets_Import"
+const Lazy_Load_Img = ({ url, style, scrollPosition }) => {
   const imgRef = useRef();
   useEffect(() => {
     const img = imgRef.current;
@@ -19,7 +21,7 @@ const Lazy_Load_Img = ({ url, style }) => {
 
   return (
     <React.Fragment>
-      {style ? (
+      {/* {style ? (
         <img
           alt="...loading"
           ref={imgRef}
@@ -28,9 +30,17 @@ const Lazy_Load_Img = ({ url, style }) => {
         />
       ) : (
         <img alt="...loading" ref={imgRef} className="lazy-load" />
-      )}
+      )} */}
+      <LazyLoadImage
+        src={url}
+        PlaceholderSrc={comment_png}
+        effect="opacity"
+        alt={url}
+        placeholderSrc={url}
+        scrollPosition={scrollPosition}
+      />
     </React.Fragment>
   );
 };
 
-export default Lazy_Load_Img;
+export default trackWindowScroll(Lazy_Load_Img);