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(),
});
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} />
))}