Add lazy loading images (#21)

* Add lazy loading images on scroll

* Format color to HSL

Author: petro97

src/AppHeader.tsx

@@ -3,14 +3,15 @@ import { Link } from "react-router-dom";
 
 import './AppHeader.scss';
 import headerLogo from './images/site-images/Company-Logo.svg';
+import { ImageContainer } from './ImageContainer';
 
 
 export const AppHeader: React.FC = () => {
   return (
     <div className="appheader">
       <div className="appheader__logo">
         <Link to="/" aria-label="logo image">
-          <img src={headerLogo} className="logo-image" alt=""/>
+          <ImageContainer imgUrl={headerLogo} imgClassName="logo-image" alt="logoImage"/>
         </Link>
       </div>
       <div className="appheader__moltincartcontainer">

src/Home.scss

@@ -17,7 +17,7 @@
     &-title-wrap {
       width: 100%;
       padding: 15px 0 30px;
-      background-color: rgba(0,0,0,0.5);
+      background-color: hsla(0, 0, 0, 0.6);
       color: $mainBackgroundColor;
       position: absolute;
       bottom: 0px;
@@ -146,7 +146,7 @@
     &-title-wrap {
       width: 100%;
       padding: 15px 0 30px;
-      background-color: rgba(0,0,0,0.5);
+      background-color: hsla(0, 0, 0, 0.6);
       color: $mainBackgroundColor;
       position: absolute;
       bottom: 0;
@@ -245,7 +245,7 @@
           .goods-info {
             width: 100%;
             padding: 45px 30px 35px;
-            background-color: rgba(0, 0, 0, 0.6);
+            background-color: hsla(0, 0, 0, 0.6);
             position: absolute;
             bottom: 0;
           }

src/Home.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ImageContainer } from './ImageContainer';
 
 import './Home.scss'
 
@@ -28,7 +29,7 @@ export const Home: React.FC = () => {
   return (
     <div className="home-page-b2c">
       <section className="main-banner">
-        <img src={bannerImage1} alt={bannerFileName1} className="main-banner-image" />
+        <ImageContainer imgUrl={bannerImage1} alt={bannerFileName1} imgClassName="main-banner-image" />
         <div className="main-banner-title-wrap">
           <div className="container">
             <h1 className="goods-heading">Go from bean to cup at the touch of a button</h1>
@@ -57,7 +58,7 @@ export const Home: React.FC = () => {
                       <button type="button" className="epbtn primary learn-more-btn">Learn more</button>
                     </div>
                   </div>
-                  <img src={productImage1} alt={productFileName1} className="main-goods-image" />
+                  <ImageContainer imgUrl={productImage1} alt={productFileName1} imgClassName="main-goods-image" />
                 </div>
               </li>
               <li className="main-goods__cell">
@@ -68,7 +69,7 @@ export const Home: React.FC = () => {
                     <p className="goods-description">Make the most of your fresh ingredients with the 3X Bluicer Pro. This high performance blender juicer features our Kinetix®</p>
                     <button type="button" className="epbtn primary learn-more-btn">Add to cart</button>
                   </div>
-                  <img src={productImage2} alt={productFileName2} className="main-goods-image" />
+                  <ImageContainer imgUrl={productImage2} alt={productFileName2} imgClassName="main-goods-image" />
                 </div>
               </li>
               <li className="main-goods__cell">
@@ -81,7 +82,7 @@ export const Home: React.FC = () => {
                     </p>
                     <button type="button" className="epbtn primary learn-more-btn">Ice cream makers</button>
                   </div>
-                  <img src={productImage3} alt={productFileName3} className="main-goods-image" />
+                  <ImageContainer imgUrl={productImage3} alt={productFileName3} imgClassName="main-goods-image" />
                 </div>
               </li>
               <li className="main-goods__cell">
@@ -93,7 +94,7 @@ export const Home: React.FC = () => {
                       Free shipping on all orders of $50!
                     </p>
                   </div>
-                  <img src={productImage4} alt={productFileName4} className="main-goods-image" />
+                  <ImageContainer imgUrl={productImage4} alt={productFileName4} imgClassName="main-goods-image" />
                 </div>
               </li>
               <li className="main-goods__cell">
@@ -104,7 +105,7 @@ export const Home: React.FC = () => {
                       View Our Products in 360
                     </p>
                   </div>
-                  <img src={productImage5} alt={productFileName5} className="main-goods-image" />
+                  <ImageContainer imgUrl={productImage5} alt={productFileName5} imgClassName="main-goods-image" />
                 </div>
               </li>
             </ul>
@@ -113,7 +114,7 @@ export const Home: React.FC = () => {
       </section>
 
       <section className="main-banner banner-section-2">
-        <img src={bannerImage2} alt={bannerFileName2} className="main-banner-image" />
+        <ImageContainer imgUrl={bannerImage2} alt={bannerFileName2} imgClassName="main-banner-image" />
         <div className="main-banner-title-wrap">
           <div className="container">
             <h2 className="goods-heading">Immersion Blenders</h2>
@@ -141,7 +142,7 @@ export const Home: React.FC = () => {
                     <p className="goods-title">Our blenders were voted the best value 3 years in a row</p>
                     <p className="goods-description">“Bellevie is a quality blender maker that will process your ingredients into smooth, creamy perfection”</p>
                   </div>
-                  <img src={productImage6} alt={productFileName6} className="main-goods-image" />
+                  <ImageContainer imgUrl={productImage6} alt={productFileName6} imgClassName="main-goods-image" />
                 </div>
               </li>
               <li className="main-goods__cell">
@@ -151,7 +152,7 @@ export const Home: React.FC = () => {
                     <p className="goods-title">Stainless steel perfection</p>
                     <p className="goods-description">Our blenders are made with top of the line stainless steel. The appliances are built strong and to last. These appliances can wistand even the most active chefs kitchen.</p>
                   </div>
-                  <img src={productImage7} alt={productFileName7} className="main-goods-image" />
+                  <ImageContainer imgUrl={productImage7} alt={productFileName7} imgClassName="main-goods-image" />
                 </div>
               </li>
             </ul>
@@ -160,7 +161,7 @@ export const Home: React.FC = () => {
       </section>
 
       <section className="main-banner banner-section-3">
-        <img src={bannerImage3} alt={bannerFileName3} className="main-banner-image" />
+        <ImageContainer imgUrl={bannerImage3} alt={bannerFileName3} imgClassName="main-banner-image" />
         <div className="main-banner-title-wrap">
           <div className="container">
             <h2 className="goods-heading">The BellVie Difference</h2>

src/ImageContainer.tsx

@@ -0,0 +1,73 @@
+import React, {
+  useEffect,
+  useState,
+} from 'react';
+
+interface ImageContainerProps {
+  imgUrl: string;
+  imgClassName?: string;
+  alt: string,
+  imageStyle?: any,
+}
+
+export const ImageContainer: React.FC<ImageContainerProps> = (props) => {
+  const {
+    imgUrl, imgClassName, alt, imageStyle,
+  } = props;
+
+  const imgAlt = alt != null ? alt : '';
+  const [error, setError] = useState(false);
+  const [imageSrc, setImageSrc] = useState<string>();
+  const [imageRef, setImageRef] = useState<any>();
+
+  useEffect(
+    () => {
+      let observer:any;
+      let didCancel = false;
+      if (imageRef && imageSrc !== imgUrl) {
+        if (IntersectionObserver) {
+          observer = new IntersectionObserver(
+            (entries) => {
+              entries.forEach((entry) => {
+                if (
+                  !didCancel
+                  && (entry.intersectionRatio > 0 || entry.isIntersecting)
+                ) {
+                  setImageSrc(imgUrl);
+                  observer.unobserve(imageRef);
+                }
+              });
+            },
+            {
+              threshold: 0,
+            },
+          );
+          observer.observe(imageRef);
+        } else {
+          setImageSrc(imgUrl);
+        }
+      }
+      return () => {
+        didCancel = true;
+        if (observer && observer.unobserve) {
+          observer.unobserve(imageRef);
+        }
+      };
+    },
+    [imgUrl, imageSrc, imageRef],
+  );
+
+  const handlePictureError = () => {
+    setError(true);
+  };
+
+  if (!error) {
+    return (<img style={imageStyle} className={imgClassName} ref={setImageRef} alt={imgAlt} src={imageSrc} onError={() => handlePictureError()} />);
+  }
+  return null;
+};
+
+ImageContainer.defaultProps = {
+  imgClassName: '',
+  imageStyle: {},
+};

src/ProductMainImage.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Product, loadImageHref } from './service';
 import { useResolve } from './hooks';
+import { ImageContainer } from './ImageContainer';
 
 interface ProductMainImageProps {
   product: Product;
@@ -15,11 +16,11 @@ export const ProductMainImage: React.FC<ProductMainImageProps> = (props) => {
   return (
     <>
       {productImageUrl && (
-        <img
-          className="productmainimage"
-          src={productImageUrl}
-          style={{ width: props.size, height: props.size, objectFit: 'fill', backgroundColor: productBackground }}
-          alt={props.product.name}
+        <ImageContainer
+        imgClassName="productmainimage"
+        imgUrl={productImageUrl}
+        alt={props.product.name}
+        imageStyle={{ width: props.size, height: props.size, objectFit: 'fill', backgroundColor: productBackground }}
         />
       )}
     </>