From 8c984c6b0f81d6be4b15e937801dd0499f46e693 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Mon, 24 Jun 2024 09:53:41 +0200 Subject: [PATCH 1/2] Fix infinite scroll issue on table --- .../hooks/useLoadRecordIndexTable.ts | 5 +-- .../components/RecordTableBodyEffect.tsx | 35 ++++++++----------- .../components/RecordTableBodyLoading.tsx | 1 + 3 files changed, 17 insertions(+), 24 deletions(-) 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 c6a26daada1d..99f613521b2d 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 4bea69f3d446..a6174f52580a 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,9 +1,8 @@ -import { useEffect } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useEffect, useState } from 'react'; +import { useRecoilValue } from 'recoil'; import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; -import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState'; import { useScrollRestoration } from '~/hooks/useScrollRestoration'; type RecordTableBodyEffectProps = { @@ -18,19 +17,15 @@ export const RecordTableBodyEffect = ({ records, totalCount, setRecordTableData, - queryStateIdentifier, loading, } = useLoadRecordIndexTable(objectNameSingular); - const { tableLastRowVisibleState } = useRecordTableStates(); + const [isFetchingMoreObjects, setIsFetchingMoreObjects] = + useState(false); - const [tableLastRowVisible, setTableLastRowVisible] = useRecoilState( - tableLastRowVisibleState, - ); + const { tableLastRowVisibleState } = useRecordTableStates(); - const isFetchingMoreObjects = useRecoilValue( - isFetchingMoreRecordsFamilyState(queryStateIdentifier), - ); + const tableLastRowVisible = useRecoilValue(tableLastRowVisibleState); const rowHeight = 32; const viewportHeight = records.length * rowHeight; @@ -44,15 +39,15 @@ 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 + setTimeout(async () => { + if (!isFetchingMoreObjects && tableLastRowVisible) { + setIsFetchingMoreObjects(true); + await fetchMoreObjects(); + setIsFetchingMoreObjects(false); + } + }, 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 d8df4058b784..0f89384ec0e5 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} > From d179e63fb435858aa0de517ae9baa553a866a20d Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Mon, 24 Jun 2024 09:57:58 +0200 Subject: [PATCH 2/2] Fix --- .../components/RecordTableBodyEffect.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 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 a6174f52580a..8d3422a215a8 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,8 +1,9 @@ -import { useEffect, useState } from 'react'; +import { useEffect } from 'react'; import { useRecoilValue } from 'recoil'; import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; +import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState'; import { useScrollRestoration } from '~/hooks/useScrollRestoration'; type RecordTableBodyEffectProps = { @@ -18,10 +19,12 @@ export const RecordTableBodyEffect = ({ totalCount, setRecordTableData, loading, + queryStateIdentifier, } = useLoadRecordIndexTable(objectNameSingular); - const [isFetchingMoreObjects, setIsFetchingMoreObjects] = - useState(false); + const isFetchingMoreObjects = useRecoilValue( + isFetchingMoreRecordsFamilyState(queryStateIdentifier), + ); const { tableLastRowVisibleState } = useRecordTableStates(); @@ -39,12 +42,10 @@ export const RecordTableBodyEffect = ({ }, [records, totalCount, setRecordTableData, loading]); useEffect(() => { - // We are adding a setTimeout here to give the user some room to scroll if they want to + // 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) { - setIsFetchingMoreObjects(true); await fetchMoreObjects(); - setIsFetchingMoreObjects(false); } }, 100); }, [fetchMoreObjects, isFetchingMoreObjects, tableLastRowVisible]);