refactor(client): remove react lazy loader library (#49468)

* feat(client): remove react lazy loader library

* fix: use loading='lazy' to defer loading

client/package.json

@@ -103,7 +103,6 @@
     "react-i18next": "11.18.6",
     "react-instantsearch-core": "6.39.0",
     "react-instantsearch-dom": "6.39.0",
-    "react-lazy-load": "3.1.14",
     "react-monaco-editor": "0.40.0",
     "react-redux": "5.1.2",
     "react-reflex": "4.0.9",

client/src/components/helpers/image-loader.tsx

@@ -1,52 +0,0 @@
-import React, { useState } from 'react';
-
-import './image-loader.css';
-import LazyLoad from 'react-lazy-load';
-
-interface ImageLoaderProps {
-  alt?: string;
-  className?: string;
-  height?: number;
-  loadedClassName?: string;
-  loadingClassName?: string;
-  offsetVertical?: number;
-  src?: string;
-  style?: React.CSSProperties;
-  width?: number;
-}
-
-const ImageLoader = ({
-  className = '',
-  loadedClassName = 'img-loaded',
-  loadingClassName = 'img-loading',
-  offsetVertical = 100,
-  alt,
-  src,
-  style,
-  width,
-  height
-}: ImageLoaderProps): JSX.Element => {
-  const [loaded, setLoaded] = useState(false);
-  const fullClassName = `${className} ${
-    loaded ? loadedClassName : loadingClassName
-  }`;
-  return (
-    <LazyLoad
-      debounce={false}
-      height={height}
-      offsetVertical={offsetVertical}
-      width={width}
-    >
-      {/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */}
-      <img
-        alt={alt}
-        className={fullClassName}
-        onLoad={() => setLoaded(true)}
-        src={src}
-        style={style}
-      />
-    </LazyLoad>
-  );
-};
-
-export default ImageLoader;

client/src/components/helpers/index.ts

@@ -5,5 +5,5 @@ export { default as Loader } from './loader';
 export { default as SkeletonSprite } from './skeleton-sprite';
 export { default as Spacer } from './spacer';
 export { default as Link } from './link';
-export { default as ImageLoader } from './image-loader';
+export { default as LazyImage } from './lazy-image';
 export { default as AvatarRenderer } from './avatar-renderer';

client/src/components/helpers/lazy-image.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+
+import './image-loader.css';
+
+interface LazyImageProps {
+  alt?: string;
+  className?: string;
+  height?: number;
+  loadedClassName?: string;
+  loadingClassName?: string;
+  offsetVertical?: number;
+  src?: string;
+  style?: React.CSSProperties;
+  width?: number;
+}
+
+const LazyImage = ({
+  className = '',
+  loadedClassName = 'img-loaded',
+  loadingClassName = 'img-loading',
+  alt,
+  src,
+  style
+}: LazyImageProps): JSX.Element => {
+  const [loaded, setLoaded] = useState(false);
+  const fullClassName = `${className} ${
+    loaded ? loadedClassName : loadingClassName
+  }`;
+  return (
+    <img
+      alt={alt}
+      className={fullClassName}
+      onLoad={() => setLoaded(true)}
+      src={src}
+      style={style}
+      loading='lazy'
+    />
+  );
+};
+
+export default LazyImage;

client/src/components/landing/components/campers-image.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Media from 'react-responsive';
 import wideImg from '../../../assets/images/landing/wide-image.png';
-import { Spacer, ImageLoader } from '../../helpers';
+import { Spacer, LazyImage } from '../../helpers';
 
 const LARGE_SCREEN_SIZE = 1200;
 
@@ -24,18 +24,16 @@ const landingImageSize = {
 function CampersImage({ pageName }: CampersImageProps): JSX.Element {
   const { t } = useTranslation();
 
-  const { spacerSize, height, width } =
+  const { spacerSize } =
     pageName === 'donate' ? donateImageSize : landingImageSize;
 
   return (
     <Media minWidth={LARGE_SCREEN_SIZE}>
       <Spacer size={spacerSize} />
-      <ImageLoader
+      <LazyImage
         alt={t('landing.hero-img-description')}
         className='landing-page-image'
-        height={height}
         src={wideImg}
-        width={width}
       />
       <p className='text-center caption'>{t('landing.hero-img-description')}</p>
     </Media>

client/src/components/landing/components/testimonials.tsx

@@ -4,7 +4,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import emmaImg from '../../../assets/images/landing/Emma.png';
 import sarahImg from '../../../assets/images/landing/Sarah.png';
 import shawnImg from '../../../assets/images/landing/Shawn.png';
-import { ImageLoader } from '../../helpers';
+import { LazyImage } from '../../helpers';
 
 const Testimonials = (): JSX.Element => {
   const { t } = useTranslation();
@@ -17,7 +17,7 @@ const Testimonials = (): JSX.Element => {
       <div className='testimonials-row' data-test-label='testimonial-cards'>
         <div className='testimonial-card'>
           <div className='testimonial-card-header'>
-            <ImageLoader
+            <LazyImage
               alt='Shawn Wang'
               className='testimonial-image'
               src={shawnImg}
@@ -44,7 +44,7 @@ const Testimonials = (): JSX.Element => {
 
         <div className='testimonial-card'>
           <div className='testimonial-card-header'>
-            <ImageLoader
+            <LazyImage
               alt='Sarah Chima'
               className='testimonial-image'
               src={sarahImg}
@@ -71,7 +71,7 @@ const Testimonials = (): JSX.Element => {
 
         <div className='testimonial-card'>
           <div className='testimonial-card-header'>
-            <ImageLoader
+            <LazyImage
               alt='Emma Bostian'
               className='testimonial-image'
               src={emmaImg}

client/src/declarations.d.ts

@@ -4,7 +4,6 @@ declare module '@freecodecamp/strip-comments';
 declare module '@types/react-redux';
 declare module '@types/validator';
 declare module '@types/lodash-es';
-declare module 'react-lazy-load';
 declare module '*.svg' {
   const content: string;
   export default content;

package-lock.json

@@ -496,7 +496,6 @@
         "react-i18next": "11.18.6",
         "react-instantsearch-core": "6.39.0",
         "react-instantsearch-dom": "6.39.0",
-        "react-lazy-load": "3.1.14",
         "react-monaco-editor": "0.40.0",
         "react-redux": "5.1.2",
         "react-reflex": "4.0.9",
@@ -42703,20 +42702,7 @@
       "version": "16.13.1",
       "license": "MIT"
     },
-    "node_modules/react-lazy-load": {
-      "version": "3.1.14",
-      "license": "MIT",
-      "dependencies": {
-        "eventlistener": "0.0.1",
-        "lodash.debounce": "^4.0.0",
-        "lodash.throttle": "^4.0.0",
-        "prop-types": "^15.5.8"
-      },
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0 || ^17.0.0",
-        "react-dom": "^0.14.0 || ^15.0.0-0 || ^16.0.0 || ^17.0.0"
-      }
-    },
+
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
       "license": "MIT"
@@ -56134,7 +56120,6 @@
         "react-i18next": "11.18.6",
         "react-instantsearch-core": "6.39.0",
         "react-instantsearch-dom": "6.39.0",
-        "react-lazy-load": "3.1.14",
         "react-monaco-editor": "0.40.0",
         "react-redux": "5.1.2",
         "react-reflex": "4.0.9",
@@ -83073,15 +83058,6 @@
     "react-is": {
       "version": "16.13.1"
     },
-    "react-lazy-load": {
-      "version": "3.1.14",
-      "requires": {
-        "eventlistener": "0.0.1",
-        "lodash.debounce": "^4.0.0",
-        "lodash.throttle": "^4.0.0",
-        "prop-types": "^15.5.8"
-      }
-    },
     "react-lifecycles-compat": {
       "version": "3.0.4"
     },