Fixed record table fetch more scroll bug

packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts

@@ -53,6 +53,7 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => {
     totalCount,
     fetchMoreRecords,
     queryStateIdentifier,
+    hasNextPage,
   } = useFindManyRecords({
     ...params,
     recordGqlFields,
@@ -74,5 +75,6 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => {
     fetchMoreRecords,
     queryStateIdentifier,
     setRecordTableData,
+    hasNextPage,
   };
 };

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRows.tsx

@@ -1,16 +1,26 @@
 import { useRecoilValue } from 'recoil';
 
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { RecordTableBodyFetchMoreLoader } from '@/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader';
 import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow';
 
 export const RecordTableRows = () => {
   const { tableRowIdsState } = useRecordTableStates();
 
   const tableRowIds = useRecoilValue(tableRowIdsState);
 
-  return tableRowIds.map((recordId, rowIndex) => {
-    return (
-      <RecordTableRow key={recordId} recordId={recordId} rowIndex={rowIndex} />
-    );
-  });
+  return (
+    <>
+      {tableRowIds.map((recordId, rowIndex) => {
+        return (
+          <RecordTableRow
+            key={recordId}
+            recordId={recordId}
+            rowIndex={rowIndex}
+          />
+        );
+      })}
+      <RecordTableBodyFetchMoreLoader />
+    </>
+  );
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx

@@ -1,21 +1,16 @@
 import { useRecoilValue } from 'recoil';
 
 import { RecordTableRows } from '@/object-record/record-table/components/RecordTableRows';
-import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { RecordTableBodyDragDropContext } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext';
 import { RecordTableBodyDroppable } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppable';
-import { RecordTableBodyFetchMoreLoader } from '@/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader';
 import { RecordTableBodyLoading } from '@/object-record/record-table/record-table-body/components/RecordTableBodyLoading';
 import { RecordTablePendingRow } from '@/object-record/record-table/record-table-row/components/RecordTablePendingRow';
-import { useContext } from 'react';
 
 export const RecordTableBody = () => {
   const { tableRowIdsState, isRecordTableInitialLoadingState } =
     useRecordTableStates();
 
-  const { objectNameSingular } = useContext(RecordTableContext);
-
   const tableRowIds = useRecoilValue(tableRowIdsState);
 
   const isRecordTableInitialLoading = useRecoilValue(
@@ -32,7 +27,6 @@ export const RecordTableBody = () => {
         <RecordTablePendingRow />
         <RecordTableRows />
       </RecordTableBodyDroppable>
-      <RecordTableBodyFetchMoreLoader objectNameSingular={objectNameSingular} />
     </RecordTableBodyDragDropContext>
   );
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyEffect.tsx

@@ -7,6 +7,7 @@ import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useL
 import { ROW_HEIGHT } from '@/object-record/record-table/constants/RowHeight';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { hasRecordTableFetchedAllRecordsComponentStateV2 } from '@/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2';
 import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState';
 import { isRecordTableScrolledTopComponentState } from '@/object-record/record-table/states/isRecordTableScrolledTopComponentState';
 import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
@@ -22,12 +23,13 @@ export const RecordTableBodyEffect = () => {
   const [hasInitializedScroll, setHasInitiazedScroll] = useState(false);
 
   const {
-    fetchMoreRecords: fetchMoreObjects,
+    fetchMoreRecords,
     records,
     totalCount,
     setRecordTableData,
     loading,
     queryStateIdentifier,
+    hasNextPage,
   } = useLoadRecordIndexTable(objectNameSingular);
 
   const isFetchingMoreObjects = useRecoilValue(
@@ -43,6 +45,9 @@ export const RecordTableBodyEffect = () => {
     isRecordTableScrolledTopComponentState,
   );
 
+  const setHasRecordTableFetchedAllRecordsComponents =
+    useSetRecoilComponentState(hasRecordTableFetchedAllRecordsComponentStateV2);
+
   // TODO: move this outside because it might cause way too many re-renders for other hooks
   useEffect(() => {
     setIsRecordTableScrolledTop(scrollTop === 0);
@@ -108,9 +113,7 @@ export const RecordTableBodyEffect = () => {
     }
   }, [
     loading,
-    isFetchingMoreObjects,
     lastShowPageRecordId,
-    fetchMoreObjects,
     records,
     scrollToPosition,
     hasInitializedScroll,
@@ -125,14 +128,26 @@ export const RecordTableBodyEffect = () => {
 
   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();
+    await fetchMoreRecords();
   }, 100);
 
   useEffect(() => {
-    if (!isFetchingMoreObjects && tableLastRowVisible) {
-      fetchMoreDebouncedIfRequested();
-    }
+    const allRecordsHaveBeenFetched = !hasNextPage;
+
+    setHasRecordTableFetchedAllRecordsComponents(allRecordsHaveBeenFetched);
+  }, [hasNextPage, setHasRecordTableFetchedAllRecordsComponents]);
+
+  useEffect(() => {
+    (async () => {
+      if (!isFetchingMoreObjects && tableLastRowVisible && hasNextPage) {
+        await fetchMoreDebouncedIfRequested();
+      }
+    })();
   }, [
+    hasNextPage,
+    records,
+    lastShowPageRecordId,
+    scrollToPosition,
     fetchMoreDebouncedIfRequested,
     isFetchingMoreObjects,
     tableLastRowVisible,

packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader.tsx

@@ -1,17 +1,13 @@
 import styled from '@emotion/styled';
 import { useContext } from 'react';
 import { useInView } from 'react-intersection-observer';
-import { useRecoilCallback, useRecoilValue } from 'recoil';
+import { useRecoilCallback } from 'recoil';
 import { GRAY_SCALE } from 'twenty-ui';
 
-import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
-import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
+import { hasRecordTableFetchedAllRecordsComponentStateV2 } from '@/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2';
 import { RecordTableWithWrappersScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
-
-type RecordTableBodyFetchMoreLoaderProps = {
-  objectNameSingular: string;
-};
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 
 const StyledText = styled.div`
   align-items: center;
@@ -23,16 +19,9 @@ const StyledText = styled.div`
   padding-left: ${({ theme }) => theme.spacing(2)};
 `;
 
-export const RecordTableBodyFetchMoreLoader = ({
-  objectNameSingular,
-}: RecordTableBodyFetchMoreLoaderProps) => {
-  const { queryStateIdentifier } = useLoadRecordIndexTable(objectNameSingular);
+export const RecordTableBodyFetchMoreLoader = () => {
   const { setRecordTableLastRowVisible } = useRecordTable();
 
-  const isFetchingMoreRecords = useRecoilValue(
-    isFetchingMoreRecordsFamilyState(queryStateIdentifier),
-  );
-
   const onLastRowVisible = useRecoilCallback(
     () => async (inView: boolean) => {
       setRecordTableLastRowVisible(inView);
@@ -44,24 +33,31 @@ export const RecordTableBodyFetchMoreLoader = ({
     RecordTableWithWrappersScrollWrapperContext,
   );
 
+  const hasRecordTableFetchedAllRecordsComponents = useRecoilComponentValue(
+    hasRecordTableFetchedAllRecordsComponentStateV2,
+  );
+
+  const showLoadingMoreRow = !hasRecordTableFetchedAllRecordsComponents;
+
   const { ref: tbodyRef } = useInView({
     onChange: onLastRowVisible,
+    delay: 1000,
     rootMargin: '1000px',
     root: scrollWrapperRef?.ref.current?.querySelector(
-      '[data-overlayscrollbars-viewport="scrollbarHidden"]',
+      '[data-overlayscrollbars-viewport]',
     ),
   });
 
+  if (!showLoadingMoreRow) {
+    return <></>;
+  }
+
   return (
-    <tbody ref={tbodyRef}>
-      {isFetchingMoreRecords && (
-        <tr>
-          <td colSpan={7}>
-            <StyledText>Loading more...</StyledText>
-          </td>
-          <td colSpan={7} />
-        </tr>
-      )}
-    </tbody>
+    <tr ref={tbodyRef}>
+      <td colSpan={7}>
+        <StyledText>Loading more...</StyledText>
+      </td>
+      <td colSpan={7} />
+    </tr>
   );
 };

packages/twenty-front/src/modules/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2.ts

@@ -0,0 +1,9 @@
+import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+
+export const hasRecordTableFetchedAllRecordsComponentStateV2 =
+  createComponentStateV2<boolean>({
+    key: 'hasRecordTableFetchedAllRecordsComponentStateV2',
+    componentContext: RecordTableScopeInternalContext,
+    defaultValue: false,
+  });