diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts index c6a26daad..99f613521 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts @@ -1,4 +1,4 @@ -import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { useRecoilValue } from 'recoil'; import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; @@ -41,8 +41,6 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => { const { setRecordTableData, setIsRecordTableInitialLoading } = useRecordTable(); - const { tableLastRowVisibleState } = useRecordTableStates(); - const setLastRowVisible = useSetRecoilState(tableLastRowVisibleState); const currentWorkspace = useRecoilValue(currentWorkspaceState); const params = useFindManyParams(objectNameSingular); @@ -58,7 +56,6 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => { ...params, recordGqlFields, onCompleted: () => { - setLastRowVisible(false); setIsRecordTableInitialLoading(false); }, onError: () => { 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 4bea69f3d..8d3422a21 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,5 @@ import { useEffect } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilValue } from 'recoil'; import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; @@ -18,20 +18,18 @@ export const RecordTableBodyEffect = ({ records, totalCount, setRecordTableData, - queryStateIdentifier, loading, + queryStateIdentifier, } = useLoadRecordIndexTable(objectNameSingular); - const { tableLastRowVisibleState } = useRecordTableStates(); - - const [tableLastRowVisible, setTableLastRowVisible] = useRecoilState( - tableLastRowVisibleState, - ); - const isFetchingMoreObjects = useRecoilValue( isFetchingMoreRecordsFamilyState(queryStateIdentifier), ); + const { tableLastRowVisibleState } = useRecordTableStates(); + + const tableLastRowVisible = useRecoilValue(tableLastRowVisibleState); + const rowHeight = 32; const viewportHeight = records.length * rowHeight; @@ -44,15 +42,13 @@ export const RecordTableBodyEffect = ({ }, [records, totalCount, setRecordTableData, loading]); useEffect(() => { - if (tableLastRowVisible && !isFetchingMoreObjects) { - fetchMoreObjects(); - } - }, [ - fetchMoreObjects, - isFetchingMoreObjects, - setTableLastRowVisible, - tableLastRowVisible, - ]); + // 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]); return <>; }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx index d8df4058b..0f89384ec 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyLoading.tsx @@ -20,6 +20,7 @@ export const RecordTableBodyLoading = () => { isDragging={false} data-testid={`row-id-${rowIndex}`} data-selectable-id={`row-id-${rowIndex}`} + key={rowIndex} >