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

Properly debounce the inf-scroll handling.

Browse source 
The previous code was simply delaying the handler, which served the intention of the time, which is to avoid using the wrong coordinate from querying too early. However, we ended up servicing each scroll message.

This is the proper fix, and should technically make scrolling smoother. Maybe this will fix 3576 as well, although I don't see much difference.
This commit is contained in:
infiinte-persistence 2020-06-23 20:56:38 +08:00 committed by Sean Yesmunt
parent ad37edf681
commit 9c7b882fbd
1 changed files with 14 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,7 +7,9 @@ import ClaimPreview from 'component/claimPreview';
import Spinner from 'component/spinner';
import { FormField } from 'component/common/form';
import usePersistedState from 'effects/use-persisted-state';
import debounce from 'util/debounce';
const DEBOUNCE_SCROLL_HANDLER_MS = 150;
const SORT_NEW = 'new';
const SORT_OLD = 'old';
@ -73,37 +75,26 @@ export default function ClaimList(props: Props) {
}, [id, setScrollBottomCbMap]);
useEffect(() => {
let timeout;
const handleScroll = debounce(e => {
if (page && pageSize && onScrollBottom && !scrollBottomCbMap[page]) {
const mainElWrapper = document.querySelector(`.${MAIN_WRAPPER_CLASS}`);
function handleScroll(e) {
timeout = setTimeout(() => {
if (page && pageSize && onScrollBottom && !scrollBottomCbMap[page]) {
const mainElWrapper = document.querySelector(`.${MAIN_WRAPPER_CLASS}`);
if (mainElWrapper && !loading && urisLength >= pageSize) {
const contentWrapperAtBottomOfPage = mainElWrapper.getBoundingClientRect().bottom - 0.5 <= window.innerHeight;
if (mainElWrapper && !loading && urisLength >= pageSize) {
const contentWrapperAtBottomOfPage =
mainElWrapper.getBoundingClientRect().bottom - 0.5 <= window.innerHeight;
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);
}
}
}, DEBOUNCE_SCROLL_HANDLER_MS);
if (onScrollBottom) {
window.addEventListener('scroll', handleScroll);
return () => {
if (timeout) {
clearTimeout(timeout);
}
window.removeEventListener('scroll', handleScroll);
};
return () => window.removeEventListener('scroll', handleScroll);
}
}, [loading, onScrollBottom, urisLength, pageSize, page, setScrollBottomCbMap]);