From 0971b6a8a35246e6196c0e955ca3a46a0308ed80 Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Wed, 22 Feb 2023 19:05:08 +0200 Subject: [PATCH] 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 | 1 - .../src/components/helpers/image-loader.tsx | 52 ------------------- client/src/components/helpers/index.ts | 2 +- client/src/components/helpers/lazy-image.tsx | 41 +++++++++++++++ .../landing/components/campers-image.tsx | 8 ++- .../landing/components/testimonials.tsx | 8 +-- client/src/declarations.d.ts | 1 - package-lock.json | 26 +--------- 8 files changed, 50 insertions(+), 89 deletions(-) delete mode 100644 client/src/components/helpers/image-loader.tsx create mode 100644 client/src/components/helpers/lazy-image.tsx diff --git a/client/package.json b/client/package.json index 6ca5a9fc994..4e26f2aea91 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/components/helpers/image-loader.tsx b/client/src/components/helpers/image-loader.tsx deleted file mode 100644 index 8010f7f5456..00000000000 --- a/client/src/components/helpers/image-loader.tsx +++ /dev/null @@ -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 ( - - {/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */} - {alt} setLoaded(true)} - src={src} - style={style} - /> - - ); -}; - -export default ImageLoader; diff --git a/client/src/components/helpers/index.ts b/client/src/components/helpers/index.ts index d58dd56ae09..a72b2717581 100644 --- a/client/src/components/helpers/index.ts +++ b/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'; diff --git a/client/src/components/helpers/lazy-image.tsx b/client/src/components/helpers/lazy-image.tsx new file mode 100644 index 00000000000..75a3555ea97 --- /dev/null +++ b/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 ( + {alt} setLoaded(true)} + src={src} + style={style} + loading='lazy' + /> + ); +}; + +export default LazyImage; diff --git a/client/src/components/landing/components/campers-image.tsx b/client/src/components/landing/components/campers-image.tsx index fe94b118c0f..f1fdbfd16d5 100644 --- a/client/src/components/landing/components/campers-image.tsx +++ b/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 ( -

{t('landing.hero-img-description')}

 diff --git a/client/src/components/landing/components/testimonials.tsx b/client/src/components/landing/components/testimonials.tsx index 01cdbfbf614..bcf7294219b 100644 --- a/client/src/components/landing/components/testimonials.tsx +++ b/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 => {
- {
- {
-