feat: implement useLoadMoreSentinel hook for improved infinite scrolling

Author: chenyme

frontend/features/files/components/sections/sidebar/sidebar-list.tsx

@@ -18,6 +18,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useLoadMoreSentinel } from "@/shared/hooks/use-load-more-sentinel";
 import { cn } from "@/lib/utils";
 import type { FileObjectDTO } from "@/shared/api/file.types";
 
@@ -221,34 +222,13 @@ export function SidebarList({
   const loadMoreRef = React.useRef<HTMLDivElement | null>(null);
   const selectedFileIDSet = React.useMemo(() => new Set(selectedFileIDs), [selectedFileIDs]);
 
-  React.useEffect(() => {
-    if (!hasMore || loading || loadingMore) {
-      return;
-    }
-
-    const sentinel = loadMoreRef.current;
-    const viewport = scrollAreaRef.current;
-    if (!sentinel || !viewport) {
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[0];
-        if (entry?.isIntersecting) {
-          onLoadMore();
-        }
-      },
-      {
-        root: viewport,
-        rootMargin: "0px 0px 200px 0px",
-        threshold: 0.01,
-      },
-    );
-
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, [hasMore, loading, loadingMore, onLoadMore]);
+  useLoadMoreSentinel({
+    enabled: hasMore && !loading && !loadingMore,
+    rootMargin: "0px 0px 200px 0px",
+    rootRef: scrollAreaRef,
+    targetRef: loadMoreRef,
+    onLoadMore,
+  });
 
   if (!loading && items.length === 0) {
     return (

frontend/shared/hooks/use-load-more-sentinel.ts

@@ -5,13 +5,25 @@ import * as React from "react";
 type UseLoadMoreSentinelOptions = {
   enabled: boolean;
   rootMargin?: string;
+  rootRef?: React.RefObject<HTMLElement | null>;
   targetRef: React.RefObject<Element | null>;
   onLoadMore: () => void | Promise<void>;
 };
 
+function rootMarginToPixels(rootMargin: string): number {
+  const values = rootMargin.trim().split(/\s+/).filter(Boolean);
+  const value = values.length >= 3 ? values[2] : values[0] ?? "";
+  const match = value.match(/^(-?\d+(?:\.\d+)?)px$/);
+  if (!match) {
+    return 120;
+  }
+  return Number(match[1]) || 0;
+}
+
 export function useLoadMoreSentinel({
   enabled,
   rootMargin = "120px",
+  rootRef,
   targetRef,
   onLoadMore,
 }: UseLoadMoreSentinelOptions) {
@@ -31,7 +43,33 @@ export function useLoadMoreSentinel({
       return;
     }
 
-    const root = target.parentElement?.closest<HTMLElement>("[data-sidebar-scroll-root='true']") ?? null;
+    const root = rootRef?.current ?? target.parentElement?.closest<HTMLElement>("[data-sidebar-scroll-root='true']") ?? null;
+    const marginPx = rootMarginToPixels(rootMargin);
+    let animationFrame: number | null = null;
+    let disposed = false;
+
+    const isNearLoadMorePoint = () => {
+      if (root) {
+        return root.scrollHeight - root.scrollTop - root.clientHeight <= marginPx;
+      }
+      return target.getBoundingClientRect().top <= window.innerHeight + marginPx;
+    };
+
+    const check = () => {
+      animationFrame = null;
+      if (disposed || !isNearLoadMorePoint()) {
+        return;
+      }
+      void onLoadMoreRef.current();
+    };
+
+    const scheduleCheck = () => {
+      if (animationFrame !== null) {
+        return;
+      }
+      animationFrame = window.requestAnimationFrame(check);
+    };
+
     const observer = new IntersectionObserver(
       (entries) => {
         const entry = entries[0];
@@ -43,6 +81,27 @@ export function useLoadMoreSentinel({
     );
 
     observer.observe(target);
-    return () => observer.disconnect();
-  }, [enabled, rootMargin, targetRef]);
+    const scrollTarget: HTMLElement | Window = root ?? window;
+    scrollTarget.addEventListener("scroll", scheduleCheck, { passive: true });
+    window.addEventListener("resize", scheduleCheck);
+
+    const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(scheduleCheck);
+    resizeObserver?.observe(target);
+    if (root) {
+      resizeObserver?.observe(root);
+    }
+
+    scheduleCheck();
+
+    return () => {
+      disposed = true;
+      observer.disconnect();
+      scrollTarget.removeEventListener("scroll", scheduleCheck);
+      window.removeEventListener("resize", scheduleCheck);
+      resizeObserver?.disconnect();
+      if (animationFrame !== null) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+    };
+  }, [enabled, rootMargin, rootRef, targetRef]);
 }