Loading cat for images.

GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js

@@ -7,7 +7,7 @@ const MorceauDetail = () => {
     const { id } = useParams();
     const [item, setItem] = useState({});
     const [isLoading, setIsLoading] = useState(false);
-    const [imageSrc, setImageSrc] = useState("/images/default_thumbnail.jpg");
+    const [imageSrc, setImageSrc] = useState(null);
 
     useEffect(() => {
         document.title = 'Morceaux';
@@ -18,22 +18,22 @@ const MorceauDetail = () => {
             setItem(json);
         }
 
-        
+
         fetchData();
 
         fetch(`https://localhost:7292/api/Image?id=${id}`)
-        .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);
+            })
 
         setIsLoading(false);
     });
 
 
     useEffect(() => {
-       
+
     }, []);
 
     function renderPrice(price, newPrice, status) {
@@ -111,10 +111,9 @@ const MorceauDetail = () => {
 
     return (
         <>
-            <div className={isLoading ? "cat-load" : "d-none cat-load"} />
-
             <div className="detail-container">
                 <div className="detail-container-left">
+                    <div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
                     <img className="detail-image" alt="" src={imageSrc} />
                     <p className="detail-description">{item.description}</p>
                 </div>