chargement async des items dans "morceaux" se fait sur le scroll down (pu besoin de boutton)

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

@@ -94,29 +94,38 @@ const Morceaux = () => {
         const json = await response.json();
         setProducts([...json]);
         setIsLoading(false);
+    }
 
+    const handleScroll = async (e) => {
+        const target = e.target;
+        if (!isLoading && !isSearch) {
+            if (target.scrollTop + target.clientHeight + 300 >= target.scrollHeight) {
+                await handleNextItems();
+            }
+        }
     }
 
     return (
-        <div className="morceaux">
+        <div className="morceaux" >
             <div className="morceaux-options-container">
                 <div className='filters-container'>
                     <Filters onChange={handleFilters} />
                 </div>
+
                 <div className="sorting-container">
                     <Sorting onChange={handleOrder} />
                 </div>
             </div>
-            <div className="morceaux-container">
+            <div className="morceaux-container" onScroll={(e) => handleScroll(e)} >
                 <ItemList items={products} />
             </div>
             <div className={isLoading ? "cat-load" : "d-none cat-load"} />
             <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
-            <div>
+            {/* <div>
                 {!isSearch && <Button onClick={handleNextItems} className='btn-load-more'>
                     ...
                 </Button>}
-            </div>
+            </div> */}
         </div>
     );
 }