mirror of
https://github.com/hydralauncher/hydra.git
synced 2025-02-02 16:23:48 +03:00
added resources exhausted check to timeout
This commit is contained in:
parent
68205a9aac
commit
a13ac6a0db
@ -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) => (
|
||||||
|
Loading…
Reference in New Issue
Block a user