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,52 +14,35 @@ const propTypes = {
   width: PropTypes.number
 };
 
-class ImageLoader extends React.Component {
-  // initial state: image loaded stage
-  state = {
-    loaded: false
-  };
-
-  // 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;
-
-    className = `${className} ${
-      this.state.loaded ? loadedClassName : loadingClassName
-    }`;
-
-    return (
-      <LazyLoad
-        debounce={false}
-        height={height}
-        offsetVertical={100}
-        width={width}
-      >
-        {/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */}
-        <img alt={alt} className={className} onLoad={this.onLoad} src={src} />
-        {/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */}
-      </LazyLoad>
-    );
-  }
-}
+const ImageLoader = ({
+  className = '',
+  loadedClassName = 'img-loaded',
+  loadingClassName = 'img-loading',
+  alt,
+  src,
+  width,
+  height
+}) => {
+  const [loaded, setLoaded] = useState(false);
+  const fullClassName = `${className} ${
+    loaded ? loadedClassName : loadingClassName
+  }`;
+  return (
+    <LazyLoad
+      debounce={false}
+      height={height}
+      offsetVertical={100}
+      width={width}
+    >
+      {/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */}
+      <img
+        alt={alt}
+        className={fullClassName}
+        onLoad={() => setLoaded(true)}
+        src={src}
+      />
+    </LazyLoad>
+  );
+};
 ImageLoader.propTypes = propTypes;
 export default ImageLoader;