From df393ae959330ad21f43aedd3026be21da8a9a52 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 2 Jan 2024 12:25:01 +0800
Subject: [PATCH] Use InView to replace nearReachStart

---
 src/pages/status.jsx | 40 +++++++++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index e52ee7e0..2ae42c70 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -545,7 +545,6 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
   const ancestors = statuses.filter((s) => s.ancestor);
 
   const [heroInView, setHeroInView] = useState(true);
-  const onView = useDebouncedCallback(setHeroInView, 100);
   const heroPointer = useMemo(() => {
     // get top offset of heroStatus
     if (!heroStatusRef.current || heroInView) return null;
@@ -652,10 +651,11 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
     }
   });
 
-  const { nearReachStart } = useScroll({
-    scrollableRef,
-    distanceFromStartPx: 16,
-  });
+  const [reachTopPost, setReachTopPost] = useState(false);
+  // const { nearReachStart } = useScroll({
+  //   scrollableRef,
+  //   distanceFromStartPx: 16,
+  // });
 
   const initialPageState = useRef(showMedia ? 'media+status' : 'status');
 
@@ -693,7 +693,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
   }, [mediaStatusID, showMedia]);
 
   const renderStatus = useCallback(
-    (status) => {
+    (status, i) => {
       const {
         id: statusID,
         ancestor,
@@ -735,7 +735,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
             <>
               <InView
                 threshold={0.1}
-                onChange={onView}
+                onChange={setHeroInView}
                 class="status-focus"
                 tabIndex={0}
               >
@@ -810,15 +810,21 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                 resetScrollPosition(statusID);
               }}
             >
-              <Status
-                statusID={statusID}
-                instance={instance}
-                withinContext
-                size={thread || ancestor ? 'm' : 's'}
-                enableTranslate
-                onMediaClick={handleMediaClick}
-                onStatusLinkClick={handleStatusLinkClick}
-              />
+              <InView
+                skip={i !== 0 || !ancestor}
+                threshold={0.5}
+                onChange={setReachTopPost}
+              >
+                <Status
+                  statusID={statusID}
+                  instance={instance}
+                  withinContext
+                  size={thread || ancestor ? 'm' : 's'}
+                  enableTranslate
+                  onMediaClick={handleMediaClick}
+                  onStatusLinkClick={handleStatusLinkClick}
+                />
+              </InView>
               {ancestor && repliesCount > 1 && (
                 <div class="replies-link">
                   <Icon icon="comment2" />{' '}
@@ -1011,7 +1017,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                       behavior: 'smooth',
                     });
                   }}
-                  hidden={!ancestors.length || nearReachStart}
+                  hidden={!ancestors.length || reachTopPost}
                   title={`${ancestors.length} posts above ‒ Go to top`}
                 >
                   <Icon icon="arrow-up" />