From 16e0321db0b16e3d17750aa487d3c5a37c1e3a03 Mon Sep 17 00:00:00 2001
From: Victor Turgeon <76506447+Medenos@users.noreply.github.com>
Date: Tue, 1 Nov 2022 18:59:52 -0400
Subject: [PATCH] Loading cat for images.

---
 .../src/components/FeaturedImage.js           | 33 ++++++++++++-------
 .../src/components/Item.js                    |  3 +-
 .../src/pages/MorceauDetail.js                | 19 +++++------
 .../grosses-mitaines-ui/src/pages/Morceaux.js |  2 +-
 4 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedImage.js b/GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedImage.js
index f259820..f500a23 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedImage.js
+++ b/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"}
+                />
+            }
+
+
+        </>
     );
 }
 
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Item.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Item.js
index 23ec66d..5657891 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Item.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Item.js
@@ -83,7 +83,7 @@ function renderPrice(price, newPrice, status) {
 
 const Item = ({ productId, name, price, newPrice, status }) => {
 
-    const [imageSrc, setImageSrc] = useState("/images/default_thumbnail.jpg");
+    const [imageSrc, setImageSrc] = useState(null);
 
     useEffect(() => {
         fetch(`https://localhost:7292/api/Image?id=${productId}&thumbnail=true`)
@@ -99,6 +99,7 @@ const Item = ({ productId, name, price, newPrice, status }) => {
         return (
 
             <Card className="item">
+                <div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
                 <Card.Img className="item-img" variant="top" src={imageSrc} />
                 <Card.Body className="item-info">
                     <div className="item-name-container">
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js
index e7f8150..9155609 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js
+++ b/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>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
index 8267658..d30c2a5 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
@@ -120,7 +120,7 @@ const Morceaux = () => {
             <div className="morceaux-container" onScroll={(e) => handleScroll(e)} >
                 <ItemList items={products} />
             </div>
-            <div className={isLoading ? "cat-load" : "d-none cat-load"} />
+            {/* <div className={isLoading ? "cat-load" : "d-none cat-load"} /> */}
             <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
         </div>
     );