From 3d63ce46667e3406a0f3fc24d4faa22e0e1d6d12 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Wed, 14 Jul 2021 09:45:18 +0800
Subject: [PATCH] Load comments when approaching viewport

Seeing the spinner too much can be annoying.

- This approach works, but currently, when the list is very long, something is taking up resources and the handler couldn't be processed, so the effect is lost (still seeing the spinner). See 6473.

- Since we are now prefetching, bumped the debounceMs a bit.
---
 ui/component/commentsList/view.jsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx
index 39c5be81f..4d7c00256 100644
--- a/ui/component/commentsList/view.jsx
+++ b/ui/component/commentsList/view.jsx
@@ -14,7 +14,15 @@ import { ENABLE_COMMENT_REACTIONS } from 'config';
 import Empty from 'component/common/empty';
 import debounce from 'util/debounce';
 
-const DEBOUNCE_SCROLL_HANDLER_MS = 50;
+const DEBOUNCE_SCROLL_HANDLER_MS = 200;
+
+function scaleToDevicePixelRatio(value) {
+  const devicePixelRatio = window.devicePixelRatio || 1.0;
+  if (devicePixelRatio < 1.0) {
+    return Math.ceil(value / devicePixelRatio);
+  }
+  return Math.ceil(value * devicePixelRatio);
+}
 
 type Props = {
   allCommentIds: any,
@@ -156,16 +164,25 @@ function CommentList(props: Props) {
     const handleCommentScroll = debounce(() => {
       // $FlowFixMe
       const rect = spinnerRef.current.getBoundingClientRect();
+      // $FlowFixMe
+      const windowH = window.innerHeight || document.documentElement.clientHeight;
+      // $FlowFixMe
+      const windowW = window.innerWidth || document.documentElement.clientWidth;
+
+      const Y_OFFSET_PX = 1000;
+      const isApproachingViewport = Y_OFFSET_PX && rect.top < windowH + scaleToDevicePixelRatio(Y_OFFSET_PX);
 
       const isInViewport =
+        rect.width > 0 &&
+        rect.height > 0 &&
         rect.bottom >= 0 &&
         rect.right >= 0 &&
         // $FlowFixMe
-        rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.top <= windowH &&
         // $FlowFixMe
-        rect.left <= (window.innerWidth || document.documentElement.clientWidth);
+        rect.left <= windowW;
 
-      if (isInViewport && page < topLevelTotalPages) {
+      if ((isInViewport || isApproachingViewport) && page < topLevelTotalPages) {
         setPage(page + 1);
       }
     }, DEBOUNCE_SCROLL_HANDLER_MS);