From e1199314ee0796fec62a63a2aed59a3cffeb6948 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Wed, 12 Nov 2025 14:40:21 +0300
Subject: [PATCH] ImageWithFallback: change image when src change

---
 src/components/ImageWithFallback/ImageWithFallback.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/ImageWithFallback/ImageWithFallback.tsx b/src/components/ImageWithFallback/ImageWithFallback.tsx
index 62a15a6..d22e3c0 100644
--- a/src/components/ImageWithFallback/ImageWithFallback.tsx
+++ b/src/components/ImageWithFallback/ImageWithFallback.tsx
@@ -46,7 +46,7 @@ const ImageWithFallback = ({
         {
           rootMargin: "50px", // Start loading 50px before the image comes into view
           threshold: 0.1,
-        }
+        },
       );
 
       if (imageRef.current) {
@@ -70,6 +70,13 @@ const ImageWithFallback = ({
     setHasError(false);
   }, []);
 
+  // Update imgSrc when src prop changes
+  useEffect(() => {
+    setImgSrc(src || fallbackSrc);
+    setIsLoading(true);
+    setHasError(false);
+  }, [src, fallbackSrc]);
+
   // Combine custom style with borderRadius if provided
   const combinedStyle = {
     ...style,
@@ -142,7 +149,6 @@ const ImageWithFallback = ({
           transition: "opacity 0.3s ease-in-out",
           objectFit: "cover",
           ...combinedStyle,
-
         }}
         alt={alt || ""}
         width={width}