LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-09-01 01:35:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

WaitUntilOnPage: Fix scroll listener always registered + bump debounce ms

Browse source 
## Issue
The scroll listener never unregisters, and is always registering itself on every scroll. I believe it was done that way to also handle the case of "element is already in viewport when mounted".

## Change
Tried to separate both "element is already in viewport when mounted" and "element scrolled into viewport" into different effects.

The timeout value used is a bit arbitrary, but is needed because the initial size is (0, 0), and to debounce any layout shifts. Reasoning: If an element is explicitly placed under this wrapper, the additional delay is acceptable since it's meant to be lazy-loaded anyway.
This commit is contained in:
infinite-persistence 2021-07-05 11:27:22 +08:00
parent 89576572f5
commit 9745d6df3e
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
1 changed files with 37 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
ui/component/common/wait-until-on-page.jsx
View file

@ -2,7 +2,7 @@
import React from 'react'; import React from 'react';
import debounce from 'util/debounce'; import debounce from 'util/debounce';
const DEBOUNCE_SCROLL_HANDLER_MS = 25; const DEBOUNCE_SCROLL_HANDLER_MS = 50;
type Props = { type Props = {
children: any, children: any,
@ -14,12 +14,13 @@ export default function WaitUntilOnPage(props: Props) {
const ref = React.useRef(); const ref = React.useRef();
const [shouldRender, setShouldRender] = React.useState(false); const [shouldRender, setShouldRender] = React.useState(false);
React.useEffect(() => { const shouldElementRender = React.useCallback((ref) => {
const handleDisplayingRef = debounce((e) => {
const element = ref && ref.current; const element = ref && ref.current;
if (element) { if (element) {
const bounding = element.getBoundingClientRect(); const bounding = element.getBoundingClientRect();
if ( if (
bounding.width > 0 &&
bounding.height > 0 &&
bounding.bottom >= 0 && bounding.bottom >= 0 &&
bounding.right >= 0 && bounding.right >= 0 &&
// $FlowFixMe // $FlowFixMe
@ -27,20 +28,34 @@ export default function WaitUntilOnPage(props: Props) {
// $FlowFixMe // $FlowFixMe
bounding.left <= (window.innerWidth || document.documentElement.clientWidth) bounding.left <= (window.innerWidth || document.documentElement.clientWidth)
) { ) {
return true;
}
}
return false;
}, []);
// Handles "element is already in viewport when mounted".
React.useEffect(() => {
setTimeout(() => {
if (!shouldRender && shouldElementRender(ref)) {
setShouldRender(true); setShouldRender(true);
} }
} }, 500);
}, []); // eslint-disable-line react-hooks/exhaustive-deps
if (element && !shouldRender) { // Handles "element scrolled into viewport".
window.addEventListener('scroll', handleDisplayingRef); React.useEffect(() => {
return () => window.removeEventListener('scroll', handleDisplayingRef); const handleDisplayingRef = debounce(() => {
if (shouldElementRender(ref)) {
setShouldRender(true);
} }
}, DEBOUNCE_SCROLL_HANDLER_MS); }, DEBOUNCE_SCROLL_HANDLER_MS);
if (ref) { if (ref && ref.current && !shouldRender) {
handleDisplayingRef(); window.addEventListener('scroll', handleDisplayingRef);
return () => window.removeEventListener('scroll', handleDisplayingRef);
} }
}, [ref, setShouldRender, shouldRender]); }, [ref, setShouldRender, shouldRender, shouldElementRender]);
const render = props.skipWait || shouldRender; const render = props.skipWait || shouldRender;