diff --git a/src/renderer/src/pages/catalogue/catalogue.tsx b/src/renderer/src/pages/catalogue/catalogue.tsx index ee1f5395..7af512cb 100644 --- a/src/renderer/src/pages/catalogue/catalogue.tsx +++ b/src/renderer/src/pages/catalogue/catalogue.tsx @@ -21,10 +21,13 @@ export function Catalogue() { const [searchResults, setSearchResults] = useState([]); const [isLoading, setIsLoading] = useState(false); + const [isLoadingInfScroll, setIsLoadingInfScroll] = useState(false); + const [resultsExhausted, setResultsExhausted] = useState(false); const contentRef = useRef(null); const cursorRef = useRef(0); + const cursorInfScrollRef = useRef(cursorRef.current + 24); const navigate = useNavigate(); @@ -62,9 +65,42 @@ export function Catalogue() { cursor: cursorRef.current.toString(), }); + resetInfiniteScroll() + navigate(`/catalogue?${params.toString()}`); }; + 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 (isAtBottom) { + setIsLoadingInfScroll(true); + window.electron + .getGames(24, cursorInfScrollRef.current) + .then(({ results, cursor }) => { + return new Promise((resolve) => { + if (results.length == 0) { + setResultsExhausted(true) + } + setTimeout(() => { + cursorInfScrollRef.current += cursor; + setSearchResults([...searchResults, ...results]); + resolve(null); + }, 500); + }); + }) + .finally(() => { + setIsLoadingInfScroll(false); + }); + } + } + return (
-
+
{isLoading && Array.from({ length: 12 }).map((_, index) => ( @@ -110,6 +146,11 @@ export function Catalogue() { ))} )} + + {isLoadingInfScroll && + Array.from({ length: 12 }).map((_, index) => ( + + ))}