Inf-scroll: Debounce before handling 'onscroll'.
---The bad scenario: If you're at the bottom and you go up using UP_ARROW or HOME key, the coordinate is still at the bottom if we service the callback immediately. This causes 'contentWrapperAtBottomOfPage' to be true and we ended up incrementing the page unnecessarily (even for searches that no longer yield any extra results). ---Fix: Fix by adding a delay. The value can probably be fine-tuned further.
This commit is contained in:
parent
ff7b4092c9
commit
c957b159b1
1 changed files with 16 additions and 9 deletions
|
@ -73,7 +73,10 @@ export default function ClaimList(props: Props) {
|
|||
}, [id, setScrollBottomCbMap]);
|
||||
|
||||
useEffect(() => {
|
||||
let timeout;
|
||||
|
||||
function handleScroll(e) {
|
||||
timeout = setTimeout(() => {
|
||||
if (page && pageSize && onScrollBottom && !scrollBottomCbMap[page]) {
|
||||
const mainElWrapper = document.querySelector(`.${MAIN_WRAPPER_CLASS}`);
|
||||
|
||||
|
@ -88,12 +91,16 @@ export default function ClaimList(props: Props) {
|
|||
}
|
||||
}
|
||||
}
|
||||
}, 150);
|
||||
}
|
||||
|
||||
if (onScrollBottom) {
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
|
||||
return () => {
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue