added resources exhausted check to timeout

This commit is contained in:
discollizard 2024-06-24 00:29:22 -03:00
parent 68205a9aac
commit a13ac6a0db

View File

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