l-min-components 1.0.862 → 1.0.864

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.862",
+  "version": "1.0.864",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/ImageComponent/index.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Img } from "react-image";
 import { ImageFallbackContainer } from "./index.styled";
 
@@ -19,17 +19,37 @@ const ImageComponents = ({
   alt,
   className,
 }) => {
+  const [imgSrc, setImgSrc] = useState(src);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setImgSrc(src); // Reset to primary src when the src prop changes
+    setLoading(true); // Reset loading state when src changes
+  }, [src]);
+
+  const handleError = () => {
+    setLoading(false); // Stop showing the loading placeholder
+  };
+
+  const handleLoad = () => {
+    setLoading(false); // Image has loaded successfully
+  };
   return (
-    <Img
-      className={className}
-      src={src}
-      width={width}
-      height={height}
-      alt={alt}
-      loader={
+    <>
+      {loading ? (
         <FallbackImage size={fallbackLogoSize} width={width} height={height} />
-      }
-    />
+      ) : (
+        <img
+          className={className}
+          src={imgSrc}
+          alt={alt}
+          onError={handleError}
+          onLoad={handleLoad}
+          style={{ display: loading ? "none" : "block", width, height }} // Hide the image while loading
+          {...props}
+        />
+      )}
+    </>
   );
 };