From a13ac6a0db1384773dabd29a9cf338f63e71e34b Mon Sep 17 00:00:00 2001
From: discollizard <discollizard@github.com>
Date: Mon, 24 Jun 2024 00:29:22 -0300
Subject: [PATCH] added resources exhausted check to timeout

---
 .../src/pages/catalogue/catalogue.tsx         | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/renderer/src/pages/catalogue/catalogue.tsx b/src/renderer/src/pages/catalogue/catalogue.tsx
index 7af512cb..d684eb19 100644
--- a/src/renderer/src/pages/catalogue/catalogue.tsx
+++ b/src/renderer/src/pages/catalogue/catalogue.tsx
@@ -65,19 +65,21 @@ export function Catalogue() {
       cursor: cursorRef.current.toString(),
     });
 
-    resetInfiniteScroll()
+    resetInfiniteScroll();
 
     navigate(`/catalogue?${params.toString()}`);
   };
 
-  const resetInfiniteScroll = () =>{
-    cursorInfScrollRef.current = cursorRef.current + 24
-    setResultsExhausted(false)
-  }
+  const resetInfiniteScroll = () => {
+    cursorInfScrollRef.current = cursorRef.current + 24;
+    setResultsExhausted(false);
+  };
 
   const infiniteLoading = () => {
-    if(resultsExhausted) return
-    const isAtBottom = contentRef.current?.offsetHeight! + contentRef.current?.scrollTop! == contentRef.current?.scrollHeight
+    if (resultsExhausted || !contentRef.current) return;
+    const isAtBottom =
+      contentRef.current.offsetHeight + contentRef.current.scrollTop ==
+      contentRef.current.scrollHeight;
 
     if (isAtBottom) {
       setIsLoadingInfScroll(true);
@@ -85,10 +87,10 @@ export function Catalogue() {
         .getGames(24, cursorInfScrollRef.current)
         .then(({ results, cursor }) => {
           return new Promise((resolve) => {
-            if (results.length == 0) {
-              setResultsExhausted(true)
-            }
             setTimeout(() => {
+              if (results.length == 0) {
+                setResultsExhausted(true);
+              }
               cursorInfScrollRef.current += cursor;
               setSearchResults([...searchResults, ...results]);
               resolve(null);
@@ -99,7 +101,7 @@ export function Catalogue() {
           setIsLoadingInfScroll(false);
         });
     }
-  }
+  };
 
   return (
     <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
@@ -114,7 +116,10 @@ export function Catalogue() {
         }}
       >
         <Button
-          onClick={() => { resetInfiniteScroll(); navigate(-1) }}
+          onClick={() => {
+            resetInfiniteScroll();
+            navigate(-1);
+          }}
           theme="outline"
           disabled={cursor === 0 || isLoading}
         >
@@ -128,7 +133,11 @@ export function Catalogue() {
         </Button>
       </section>
 
-      <section ref={contentRef} className={styles.content} onScroll={infiniteLoading}>
+      <section
+        ref={contentRef}
+        className={styles.content}
+        onScroll={infiniteLoading}
+      >
         <section className={styles.cards}>
           {isLoading &&
             Array.from({ length: 12 }).map((_, index) => (
@@ -147,7 +156,7 @@ export function Catalogue() {
             </>
           )}
 
-        {isLoadingInfScroll &&
+          {isLoadingInfScroll &&
             Array.from({ length: 12 }).map((_, index) => (
               <Skeleton key={index} className={styles.cardSkeleton} />
             ))}