LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Inf-scroll: Debounce before handling 'onscroll'.

Browse source 
---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:
infiinte-persistence 2020-06-15 12:08:17 +02:00 committed by Sean Yesmunt
parent ff7b4092c9
commit c957b159b1
1 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
ui/component/claimList/view.jsx
View file

@ -73,27 +73,34 @@ export default function ClaimList(props: Props) {
}, [id, setScrollBottomCbMap]);
useEffect(() => {
let timeout;
function handleScroll(e) {
if (page && pageSize && onScrollBottom && !scrollBottomCbMap[page]) {
const mainElWrapper = document.querySelector(`.${MAIN_WRAPPER_CLASS}`);
timeout = setTimeout(() => {
if (page && pageSize && onScrollBottom && !scrollBottomCbMap[page]) {
const mainElWrapper = document.querySelector(`.${MAIN_WRAPPER_CLASS}`);
if (mainElWrapper && !loading && urisLength >= pageSize) {
const contentWrapperAtBottomOfPage = window.scrollY + window.innerHeight >= mainElWrapper.offsetHeight;
if (mainElWrapper && !loading && urisLength >= pageSize) {
const contentWrapperAtBottomOfPage = window.scrollY + window.innerHeight >= mainElWrapper.offsetHeight;
if (contentWrapperAtBottomOfPage) {
onScrollBottom();
if (contentWrapperAtBottomOfPage) {
onScrollBottom();
// Save that we've fetched this page to avoid weird stuff happening with fast scrolling
setScrollBottomCbMap({ ...scrollBottomCbMap, [page]: true });
// Save that we've fetched this page to avoid weird stuff happening with fast scrolling
setScrollBottomCbMap({ ...scrollBottomCbMap, [page]: true });
}
}
}
}
}, 150);
}
if (onScrollBottom) {
window.addEventListener('scroll', handleScroll);
return () => {
if (timeout) {
clearTimeout(timeout);
}
window.removeEventListener('scroll', handleScroll);
};
}