From 9c7b882fbdacfa82d84745f61722dd286a3ad720 Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Tue, 23 Jun 2020 20:56:38 +0800
Subject: [PATCH] Properly debounce the inf-scroll handling.

The previous code was simply delaying the handler, which served the intention of the time, which is to avoid using the wrong coordinate from querying too early. However, we ended up servicing each scroll message.

This is the proper fix, and should technically make scrolling smoother. Maybe this will fix 3576 as well, although I don't see much difference.
---
 ui/component/claimList/view.jsx | 37 +++++++++++++--------------------
 1 file changed, 14 insertions(+), 23 deletions(-)

diff --git a/ui/component/claimList/view.jsx b/ui/component/claimList/view.jsx
index ca056939b..06e9bc18a 100644
--- a/ui/component/claimList/view.jsx
+++ b/ui/component/claimList/view.jsx
@@ -7,7 +7,9 @@ import ClaimPreview from 'component/claimPreview';
 import Spinner from 'component/spinner';
 import { FormField } from 'component/common/form';
 import usePersistedState from 'effects/use-persisted-state';
+import debounce from 'util/debounce';
 
+const DEBOUNCE_SCROLL_HANDLER_MS = 150;
 const SORT_NEW = 'new';
 const SORT_OLD = 'old';
 
@@ -73,37 +75,26 @@ export default function ClaimList(props: Props) {
   }, [id, setScrollBottomCbMap]);
 
   useEffect(() => {
-    let timeout;
+    const handleScroll = debounce(e => {
+      if (page && pageSize && onScrollBottom && !scrollBottomCbMap[page]) {
+        const mainElWrapper = document.querySelector(`.${MAIN_WRAPPER_CLASS}`);
 
-    function handleScroll(e) {
-      timeout = setTimeout(() => {
-        if (page && pageSize && onScrollBottom && !scrollBottomCbMap[page]) {
-          const mainElWrapper = document.querySelector(`.${MAIN_WRAPPER_CLASS}`);
+        if (mainElWrapper && !loading && urisLength >= pageSize) {
+          const contentWrapperAtBottomOfPage = mainElWrapper.getBoundingClientRect().bottom - 0.5 <= window.innerHeight;
 
-          if (mainElWrapper && !loading && urisLength >= pageSize) {
-            const contentWrapperAtBottomOfPage =
-              mainElWrapper.getBoundingClientRect().bottom - 0.5 <= window.innerHeight;
+          if (contentWrapperAtBottomOfPage) {
+            onScrollBottom();
 
-            if (contentWrapperAtBottomOfPage) {
-              onScrollBottom();
-
-              // Save that we've fetched this page to avoid weird stuff happening with fast scrolling
-              setScrollBottomCbMap({ ...scrollBottomCbMap, [page]: true });
-            }
+            // Save that we've fetched this page to avoid weird stuff happening with fast scrolling
+            setScrollBottomCbMap({ ...scrollBottomCbMap, [page]: true });
           }
         }
-      }, 150);
-    }
+      }
+    }, DEBOUNCE_SCROLL_HANDLER_MS);
 
     if (onScrollBottom) {
       window.addEventListener('scroll', handleScroll);
-
-      return () => {
-        if (timeout) {
-          clearTimeout(timeout);
-        }
-        window.removeEventListener('scroll', handleScroll);
-      };
+      return () => window.removeEventListener('scroll', handleScroll);
     }
   }, [loading, onScrollBottom, urisLength, pageSize, page, setScrollBottomCbMap]);