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

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

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