upgrade virtua

package.json

@@ -119,7 +119,7 @@
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "use-long-press": "^3.2.0",
-    "virtua": "^0.36.3"
+    "virtua": "^0.37.0"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.25.9",

src/features/comment/inTree/Comments.tsx

@@ -16,6 +16,7 @@ import { VList, VListHandle } from "virtua";
 
 import { useSetActivePage } from "#/features/auth/AppContext";
 import FeedLoadMoreFailed from "#/features/feed/endItems/FeedLoadMoreFailed";
+import { useRangeChange } from "#/features/feed/useRangeChange";
 import { getPost } from "#/features/post/postSlice";
 import { defaultCommentDepthSelector } from "#/features/settings/settingsSlice";
 import { scrollIntoView, useScrollIntoViewWorkaround } from "#/helpers/dom";
@@ -490,6 +491,12 @@ export default function Comments({
     [allComments, bottomPadding, header, renderFooter],
   );
 
+  const onScroll = useRangeChange(virtuaRef, (start, end) => {
+    if (end + 10 > allComments.length && !loadFailed) {
+      fetchComments();
+    }
+  });
+
   return (
     <CommentsContext.Provider value={commentsContextValue}>
       <IonRefresher
@@ -512,12 +519,8 @@ export default function Comments({
             // @ts-expect-error Virtua types not updated for forwardRef-less components
             item={IndexedVirtuaItem}
             overscan={1}
-            onRangeChange={(start, end) => {
-              if (end + 10 > allComments.length && !loadFailed) {
-                fetchComments();
-              }
-            }}
             onScroll={(offset) => {
+              onScroll();
               setIsListAtTop(offset < 6);
             }}
           >

src/features/feed/Feed.tsx

@@ -27,6 +27,7 @@ import { useAppSelector } from "#/store";
 import EndPost, { EndPostProps } from "./endItems/EndPost";
 import FeedLoadMoreFailed from "./endItems/FeedLoadMoreFailed";
 import FetchMore from "./endItems/FetchMore";
+import { useRangeChange } from "./useRangeChange";
 
 const ABORT_REASON_UNMOUNT = "unmount";
 
@@ -258,6 +259,35 @@ export default function Feed<I>({
 
   useSetActivePage(virtuaHandle);
 
+  const onScroll = useRangeChange(
+    virtuaHandle,
+    function onRangeChange(start, end) {
+      if (start < 0 || end < 0 || (!start && !end)) return; // no items rendered
+
+      // if scrolled down
+      const startOffset = header ? 1 : 0; // header counts as item to VList
+      if (
+        scrollingRef.current &&
+        start > startOffset &&
+        start > startRangeRef.current
+      ) {
+        // emit what was removed
+        onRemovedFromTop?.(
+          filteredItems.slice(
+            startRangeRef.current - startOffset,
+            start - startOffset,
+          ),
+        );
+      }
+
+      startRangeRef.current = start;
+
+      if (end + 10 > filteredItems.length && !loadFailed && infiniteScrolling) {
+        fetchMore();
+      }
+    },
+  );
+
   const fetchMoreEvent = useEffectEvent(fetchMore);
 
   useEffect(() => {
@@ -330,39 +360,12 @@ export default function Feed<I>({
             scrollingRef.current = false;
           }}
           onScroll={(offset) => {
+            onScroll();
+
             scrollingRef.current = true;
             setIsListAtTop(offset < 10);
             setScrolledPastSearch(offset > 40);
           }}
-          onRangeChange={(start, end) => {
-            if (start < 0 || end < 0 || (!start && !end)) return; // no items rendered
-
-            // if scrolled down
-            const startOffset = header ? 1 : 0; // header counts as item to VList
-            if (
-              scrollingRef.current &&
-              start > startOffset &&
-              start > startRangeRef.current
-            ) {
-              // emit what was removed
-              onRemovedFromTop?.(
-                filteredItems.slice(
-                  startRangeRef.current - startOffset,
-                  start - startOffset,
-                ),
-              );
-            }
-
-            startRangeRef.current = start;
-
-            if (
-              end + 10 > filteredItems.length &&
-              !loadFailed &&
-              infiniteScrolling
-            ) {
-              fetchMore();
-            }
-          }}
           /* Large posts reflow with image load, so mount to dom a bit sooner */
           overscan={1}
         >

src/features/feed/useRangeChange.ts

@@ -0,0 +1,28 @@
+import { useThrottledCallback } from "@mantine/hooks";
+import { useRef } from "react";
+import { VListHandle } from "virtua";
+
+export function useRangeChange(
+  virtuaHandleRef: React.RefObject<VListHandle>,
+  onRangeChange: (startIndex: number, endIndex: number) => void,
+) {
+  const startIndexRef = useRef(-1);
+  const endIndexRef = useRef(-1);
+
+  return useThrottledCallback(function onScroll() {
+    const virtuaHandle = virtuaHandleRef.current;
+
+    if (!virtuaHandle) return;
+    const startIndex = virtuaHandle.startIndex;
+    const endIndex = virtuaHandle.endIndex;
+
+    if (
+      startIndex !== startIndexRef.current ||
+      endIndex !== endIndexRef.current
+    ) {
+      onRangeChange(startIndex, endIndex);
+    }
+    startIndexRef.current = startIndex;
+    endIndexRef.current = endIndex;
+  }, 200);
+}