refactor(client): remove react lazy loader library (freeCodeCamp#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/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;