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

Load comments if spinner is visible from the start

Browse source 
It was previously only responding to scroll events.
This commit is contained in:
infinite-persistence 2021-07-14 11:06:47 +08:00
parent 3d63ce4666
commit e77a986125
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
1 changed files with 22 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
ui/component/commentsList/view.jsx
View file

@ -153,6 +153,7 @@ function CommentList(props: Props) {
fetchingChannels,
]);
// Scroll to linked-comment
useEffect(() => {
if (readyToDisplayComments && linkedCommentId && commentRef && commentRef.current) {
commentRef.current.scrollIntoView({ block: 'start' });
@ -160,17 +161,18 @@ function CommentList(props: Props) {
}
}, [readyToDisplayComments, linkedCommentId]);
// Infinite scroll
useEffect(() => {
const handleCommentScroll = debounce(() => {
// $FlowFixMe
const rect = spinnerRef.current.getBoundingClientRect();
// $FlowFixMe
const windowH = window.innerHeight || document.documentElement.clientHeight;
// $FlowFixMe
const windowW = window.innerWidth || document.documentElement.clientWidth;
function shouldFetchNextPage(page, topLevelTotalPages, window, document, yPrefetchPx = 1000) {
if (!spinnerRef || !spinnerRef.current) {
return false;
}
const Y_OFFSET_PX = 1000;
const isApproachingViewport = Y_OFFSET_PX && rect.top < windowH + scaleToDevicePixelRatio(Y_OFFSET_PX);
const rect = spinnerRef.current.getBoundingClientRect(); // $FlowFixMe
const windowH = window.innerHeight || document.documentElement.clientHeight; // $FlowFixMe
const windowW = window.innerWidth || document.documentElement.clientWidth; // $FlowFixMe
const isApproachingViewport = yPrefetchPx !== 0 && rect.top < windowH + scaleToDevicePixelRatio(yPrefetchPx);
const isInViewport =
rect.width > 0 &&
@ -182,16 +184,23 @@ function CommentList(props: Props) {
// $FlowFixMe
rect.left <= windowW;
if ((isInViewport || isApproachingViewport) && page < topLevelTotalPages) {
return (isInViewport || isApproachingViewport) && page < topLevelTotalPages;
}
const handleCommentScroll = debounce(() => {
if (shouldFetchNextPage(page, topLevelTotalPages, window, document)) {
setPage(page + 1);
}
}, DEBOUNCE_SCROLL_HANDLER_MS);
if (!isFetchingComments && readyToDisplayComments && moreBelow && spinnerRef && spinnerRef.current) {
window.addEventListener('scroll', handleCommentScroll);
if (shouldFetchNextPage(page, topLevelTotalPages, window, document, 0)) {
setPage(page + 1);
} else {
window.addEventListener('scroll', handleCommentScroll);
return () => window.removeEventListener('scroll', handleCommentScroll);
}
}
return () => window.removeEventListener('scroll', handleCommentScroll);
}, [
page,
moreBelow,