chore(client): refactor ImageLoader (#39691)

client/src/components/helpers/ImageLoader.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import './image-loader.css';
 import LazyLoad from 'react-lazy-load';
@@ -14,39 +14,19 @@ const propTypes = {
   width: PropTypes.number
 };
 
-class ImageLoader extends React.Component {
+const ImageLoader = ({
-  // initial state: image loaded stage
+  className = '',
-  state = {
+  loadedClassName = 'img-loaded',
-    loaded: false
+  loadingClassName = 'img-loading',
-  };
-
-  // define our loading and loaded image classes
-  static defaultProps = {
-    className: '',
-    loadingClassName: 'img-loading',
-    loadedClassName: 'img-loaded'
-  };
-
-  // image onLoad handler to update state to loaded
-  onLoad = () => {
-    this.setState(() => ({ loaded: true }));
-  };
-
-  render() {
-    let {
-      className,
-      loadedClassName,
-      loadingClassName,
   alt,
   src,
   width,
   height
-    } = this.props;
+}) => {
-
+  const [loaded, setLoaded] = useState(false);
-    className = `${className} ${
+  const fullClassName = `${className} ${
-      this.state.loaded ? loadedClassName : loadingClassName
+    loaded ? loadedClassName : loadingClassName
   }`;
-
   return (
     <LazyLoad
       debounce={false}
@@ -55,11 +35,14 @@ class ImageLoader extends React.Component {
       width={width}
     >
       {/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */}
-        <img alt={alt} className={className} onLoad={this.onLoad} src={src} />
+      <img
-        {/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */}
+        alt={alt}
+        className={fullClassName}
+        onLoad={() => setLoaded(true)}
+        src={src}
+      />
     </LazyLoad>
   );
-  }
+};
-}
 ImageLoader.propTypes = propTypes;
 export default ImageLoader;