loading first item when open morceaux. Pi j'ai enlevé le height du root parce que ça fait que le foot est par dessus du stock

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

@@ -6,11 +6,6 @@ import Sorting from "../components/Sorting"
 
 const Morceaux = (startingProducts) => {
 
-
-    useEffect(() => {
-        document.title = 'Morceaux';
-    });
-
     const [products, setProducts] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
 
@@ -18,6 +13,19 @@ const Morceaux = (startingProducts) => {
     var filterPrice = "";
     var filterState = "";
 
+    useEffect(() => {
+        document.title = 'Morceaux';
+        setIsLoading(true);
+        async function fetchData() {
+            const response = await fetch(`https://localhost:7292/api/Inventory`);
+            const json = await response.json();
+            if (json.length > 0)
+                setProducts([...json]);
+        }
+        fetchData();
+        setIsLoading(false);
+    },[]);
+
     const handleNextItems = async () => {
 
         var url;
@@ -29,9 +37,9 @@ const Morceaux = (startingProducts) => {
         setIsLoading(true);
         const response = await fetch(url);
         const json = await response.json();
-        
+
         //TODO: regler bug qui permet d'avoir des duplicats (trouver une façon de skipper les duplicats)
-        if (json.length > 0) 
+        if (json.length > 0)
             setProducts([...products, ...json]);
 
         setIsLoading(false);
@@ -57,7 +65,7 @@ const Morceaux = (startingProducts) => {
     }
 
     return (
-        <div className="morceaux"div>
+        <div className="morceaux">
             <div className="sorting-container">
                 <Sorting onChange={handleOrder} />
             </div>