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

Load comments when approaching viewport

Browse source 
Seeing the spinner too much can be annoying.

- This approach works, but currently, when the list is very long, something is taking up resources and the handler couldn't be processed, so the effect is lost (still seeing the spinner). See 6473.

- Since we are now prefetching, bumped the debounceMs a bit.
This commit is contained in:
infinite-persistence 2021-07-14 09:45:18 +08:00
parent 2f92ce8bb4
commit 3d63ce4666
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
1 changed files with 21 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,7 +14,15 @@ import { ENABLE_COMMENT_REACTIONS } from 'config';
import Empty from 'component/common/empty';
import debounce from 'util/debounce';
const DEBOUNCE_SCROLL_HANDLER_MS = 50;
const DEBOUNCE_SCROLL_HANDLER_MS = 200;
function scaleToDevicePixelRatio(value) {
const devicePixelRatio = window.devicePixelRatio || 1.0;
if (devicePixelRatio < 1.0) {
return Math.ceil(value / devicePixelRatio);
}
return Math.ceil(value * devicePixelRatio);
}
type Props = {
allCommentIds: any,
@ -156,16 +164,25 @@ function CommentList(props: Props) {
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;
const Y_OFFSET_PX = 1000;
const isApproachingViewport = Y_OFFSET_PX && rect.top < windowH + scaleToDevicePixelRatio(Y_OFFSET_PX);
const isInViewport =
rect.width > 0 &&
rect.height > 0 &&
rect.bottom >= 0 &&
rect.right >= 0 &&
// $FlowFixMe
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.top <= windowH &&
// $FlowFixMe
rect.left <= (window.innerWidth || document.documentElement.clientWidth);
rect.left <= windowW;
if (isInViewport && page < topLevelTotalPages) {
if ((isInViewport || isApproachingViewport) && page < topLevelTotalPages) {
setPage(page + 1);
}
}, DEBOUNCE_SCROLL_HANDLER_MS);