From 498e4ff6ba16bf1306b2485305eb31cb8022f8d0 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Mon, 24 Jun 2024 13:45:07 +0200
Subject: [PATCH] Refactor infiniteScoll to use debouncing (#5999)

Same as https://github.com/twentyhq/twenty/pull/5996 but with
useDebounced as asked in review
---
 .../components/RecordTableBodyEffect.tsx      | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx
index 8d3422a215..508c2c8c8f 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
+import { useDebouncedCallback } from 'use-debounce';
 
 import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
@@ -41,14 +42,20 @@ export const RecordTableBodyEffect = ({
     }
   }, [records, totalCount, setRecordTableData, loading]);
 
+  const fetchMoreDebouncedIfRequested = useDebouncedCallback(async () => {
+    // We are debouncing here to give the user some room to scroll if they want to within this throttle window
+    await fetchMoreObjects();
+  }, 100);
+
   useEffect(() => {
-    // We are adding a setTimeout here to give the user some room to scroll if they want to within this throttle window
-    setTimeout(async () => {
-      if (!isFetchingMoreObjects && tableLastRowVisible) {
-        await fetchMoreObjects();
-      }
-    }, 100);
-  }, [fetchMoreObjects, isFetchingMoreObjects, tableLastRowVisible]);
+    if (!isFetchingMoreObjects && tableLastRowVisible) {
+      fetchMoreDebouncedIfRequested();
+    }
+  }, [
+    fetchMoreDebouncedIfRequested,
+    isFetchingMoreObjects,
+    tableLastRowVisible,
+  ]);
 
   return <></>;
 };