From 3bba4ab6307cd827e433936c48ca5a359252f2d0 Mon Sep 17 00:00:00 2001 From: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com> Date: Tue, 11 Jan 2022 05:26:44 -0800 Subject: [PATCH] Fix infinite scroll when "Upcoming livestream" appears (#665) ## 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. --- ui/component/claimList/view.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/component/claimList/view.jsx b/ui/component/claimList/view.jsx index 5f3a2f8c1..24e38bd85 100644 --- a/ui/component/claimList/view.jsx +++ b/ui/component/claimList/view.jsx @@ -132,10 +132,10 @@ export default function ClaimList(props: Props) { const handleScroll = debounce((e) => { if (page && pageSize && onScrollBottom) { const mainEl = document.querySelector(`.${MAIN_CLASS}`); - 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) { onScrollBottom(); }