From 3d00e8b70753cc02468ca5e19d69d192c6ae49dc Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Fri, 3 Oct 2025 17:04:56 -0700
Subject: [PATCH] feat: decrease threshold for infinite scroll trigger

---
 .../infiniteScroll/InfiniteScroll.tsx              | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/webapp/components/contentDisplay/infiniteScroll/InfiniteScroll.tsx b/src/webapp/components/contentDisplay/infiniteScroll/InfiniteScroll.tsx
index 1d6c3ad0..c7e2858a 100644
--- a/src/webapp/components/contentDisplay/infiniteScroll/InfiniteScroll.tsx
+++ b/src/webapp/components/contentDisplay/infiniteScroll/InfiniteScroll.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { ReactNode, useEffect, startTransition } from 'react';
+import { ReactNode, useEffect, startTransition, useRef } from 'react';
 import { Center, Button, Stack } from '@mantine/core';
-import { useInViewport } from '@mantine/hooks';
+import { useIntersection } from '@mantine/hooks';
 
 interface Props {
   children: ReactNode;
@@ -16,15 +16,19 @@ interface Props {
 }
 
 export default function InfiniteScroll(props: Props) {
-  const { ref, inViewport } = useInViewport();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { ref, entry } = useIntersection({
+    root: containerRef.current,
+    threshold: 0,
+  });
 
   useEffect(() => {
     startTransition(() => {
-      if (inViewport && props.hasMore && !props.isLoading) {
+      if (entry?.isIntersecting && props.hasMore && !props.isLoading) {
         props.loadMore();
       }
     });
-  }, [inViewport, props.hasMore, props.isLoading, props.loadMore]);
+  }, [entry?.isIntersecting, props.hasMore, props.isLoading, props.loadMore]);
 
   return (
     <Stack>
-- 
2.51.2