Loading cat for images.

GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedImage.js

@@ -2,24 +2,33 @@ import { useState, useEffect } from "react";
 
 const FeaturedImage = ({ productId }) => {
 
-    const [imageSrc, setImageSrc] = useState("/images/default_thumbnail.jpg");
+    const [imageSrc, setImageSrc] = useState(null);
 
     useEffect(() => {
         fetch(`https://localhost:7292/api/Image?id=${productId}`)
-        .then(response => response.blob())
-        .then(blob => {
-            const imageUrl = URL.createObjectURL(blob);
-            setImageSrc(imageUrl);
-        })
-    },[]);
+            .then(response => response.blob())
+            .then(blob => {
+                const imageUrl = URL.createObjectURL(blob);
+                setImageSrc(imageUrl);
+            })
+    }, []);
 
 
     return (
-        <img
-            className="featured-img"
-            src={imageSrc}
-            alt={productId + "_image"}
-        />
+        <>
+            {!imageSrc ?
+                <div
+                    className="cat-load" /> :
+
+                <img
+                    className="featured-img"
+                    src={imageSrc}
+                    alt={productId + "_image"}
+                />
+            }
+
+
+        </>
     );
 }