From bb8fb038ca9b76ed066bba44fa0acfc083055945 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 5 Jul 2021 11:54:55 +0800
Subject: [PATCH] WaitUntilOnPage: add option to load when approaching viewport

---
 ui/component/common/wait-until-on-page.jsx | 41 +++++++++++++---------
 ui/page/home/view.jsx                      |  2 +-
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/ui/component/common/wait-until-on-page.jsx b/ui/component/common/wait-until-on-page.jsx
index 5d2bb734f..af0c423f0 100644
--- a/ui/component/common/wait-until-on-page.jsx
+++ b/ui/component/common/wait-until-on-page.jsx
@@ -8,31 +8,40 @@ type Props = {
   children: any,
   skipWait?: boolean,
   placeholder?: any,
+  yOffset?: number,
 };
 
 export default function WaitUntilOnPage(props: Props) {
+  const { yOffset } = props;
   const ref = React.useRef();
   const [shouldRender, setShouldRender] = React.useState(false);
 
-  const shouldElementRender = React.useCallback((ref) => {
-    const element = ref && ref.current;
-    if (element) {
-      const bounding = element.getBoundingClientRect();
-      if (
-        bounding.width > 0 &&
-        bounding.height > 0 &&
-        bounding.bottom >= 0 &&
-        bounding.right >= 0 &&
+  const shouldElementRender = React.useCallback(
+    (ref) => {
+      const element = ref && ref.current;
+      if (element) {
+        const bounding = element.getBoundingClientRect();
         // $FlowFixMe
-        bounding.top <= (window.innerHeight || document.documentElement.clientHeight) &&
+        const windowH = window.innerHeight || document.documentElement.clientHeight;
         // $FlowFixMe
-        bounding.left <= (window.innerWidth || document.documentElement.clientWidth)
-      ) {
-        return true;
+        const windowW = window.innerWidth || document.documentElement.clientWidth;
+
+        const isApproachingViewport = yOffset && bounding.top < windowH + yOffset;
+        const isInViewport = // also covers "element is larger than viewport".
+          bounding.width > 0 &&
+          bounding.height > 0 &&
+          bounding.bottom >= 0 &&
+          bounding.right >= 0 &&
+          bounding.top <= windowH &&
+          bounding.left <= windowW;
+
+        return isInViewport || isApproachingViewport;
       }
-    }
-    return false;
-  }, []);
+
+      return false;
+    },
+    [yOffset]
+  );
 
   // Handles "element is already in viewport when mounted".
   React.useEffect(() => {
diff --git a/ui/page/home/view.jsx b/ui/page/home/view.jsx
index 0ccbf65d4..1941091a3 100644
--- a/ui/page/home/view.jsx
+++ b/ui/page/home/view.jsx
@@ -63,7 +63,7 @@ function HomePage(props: Props) {
 
         {index === 0 && <>{claimTiles}</>}
         {index !== 0 && (
-          <WaitUntilOnPage name={title} placeholder={tilePlaceholder}>
+          <WaitUntilOnPage name={title} placeholder={tilePlaceholder} yOffset={800}>
             {claimTiles}
           </WaitUntilOnPage>
         )}