Loading cat for images.

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">