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

Fix infinite scroll when "Upcoming livestream" appears (#665)

Browse source 
## Issue
When "Upcoming livestream" appears in a list, infinite scroll stops working.

## Cause
The difference between `mainEl.getBoundingClientRect().bottom` and `window.innerHeight` became slightly greater than 0.5, so it was deemed as "haven't reached the bottom".

## Change
Coincidently, I've been wanting to make the inf scroll load earlier (instead of after reaching the absolute bottom) to make the experience smoother, so added a 200px threshold, which is roughly the height of a tile. This gets us the new behavior while also fixes the original problem.
This commit is contained in:
infinite-persistence 2022-01-11 05:26:44 -08:00 committed by GitHub
parent 373766c5b5
commit 3bba4ab630
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -132,10 +132,10 @@ export default function ClaimList(props: Props) {
const handleScroll = debounce((e) => { const handleScroll = debounce((e) => {
if (page && pageSize && onScrollBottom) { if (page && pageSize && onScrollBottom) {
const mainEl = document.querySelector(`.${MAIN_CLASS}`); const mainEl = document.querySelector(`.${MAIN_CLASS}`);
if (mainEl && !loading && urisLength >= pageSize) { if (mainEl && !loading && urisLength >= pageSize) {
const contentWrapperAtBottomOfPage = mainEl.getBoundingClientRect().bottom - 0.5 <= window.innerHeight; const ROUGH_TILE_HEIGHT_PX = 200;
const mainBoundingRect = mainEl.getBoundingClientRect();
const contentWrapperAtBottomOfPage = mainBoundingRect.bottom - ROUGH_TILE_HEIGHT_PX <= window.innerHeight;
if (contentWrapperAtBottomOfPage) { if (contentWrapperAtBottomOfPage) {
onScrollBottom(); onScrollBottom();
} }