From dd044e8f664ef32a3a88c6e8851eaf694f194186 Mon Sep 17 00:00:00 2001 From: Andrey Kud Date: Wed, 20 Dec 2023 10:19:02 -0300 Subject: [PATCH] fix: empty state should not appear during table loading (#3040) * fix: empty state should not appear during table loading * feat: add initla load tracking * Fix lint --------- Co-authored-by: Charles Bochet --- .../modules/object-record/hooks/useObjectRecordTable.ts | 6 ++++++ .../record-table/components/RecordTable.tsx | 7 ++++++- .../record-table/components/RecordTableBody.tsx | 9 --------- .../components/RecordTableBodyFetchMoreLoader.tsx | 9 --------- .../record-table/hooks/internal/useSetRecordTableData.ts | 2 -- .../states/isFetchingRecordTableDataState.ts | 6 ------ .../states/isRecordTableInitialLoadingState.ts | 6 ++++++ 7 files changed, 18 insertions(+), 27 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-record/record-table/states/isFetchingRecordTableDataState.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingState.ts diff --git a/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts b/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts index a541b0ae6..c0928218c 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts @@ -6,6 +6,7 @@ import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObje import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy'; import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; +import { isRecordTableInitialLoadingState } from '@/object-record/record-table/states/isRecordTableInitialLoadingState'; import { turnFiltersIntoObjectRecordFilters } from '@/object-record/utils/turnFiltersIntoWhereClause'; import { signInBackgroundMockCompanies } from '@/sign-in-background-mock/constants/signInBackgroundMockCompanies'; @@ -41,6 +42,10 @@ export const useObjectRecordTable = () => { foundObjectMetadataItem?.fields ?? [], ); + const setIsRecordTableInitialLoading = useSetRecoilState( + isRecordTableInitialLoadingState, + ); + const { records, loading, fetchMoreRecords, queryStateIdentifier } = useFindManyRecords({ objectNameSingular, @@ -48,6 +53,7 @@ export const useObjectRecordTable = () => { orderBy, onCompleted: () => { setLastRowVisible(false); + setIsRecordTableInitialLoading(false); }, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx index eb94690e4..2b4d7a05c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx @@ -4,6 +4,7 @@ import { useRecoilCallback, useRecoilValue } from 'recoil'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural'; +import { isRecordTableInitialLoadingState } from '@/object-record/record-table/states/isRecordTableInitialLoadingState'; import { IconPlus } from '@/ui/display/icon'; import { Button } from '@/ui/input/button/components/Button'; import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; @@ -126,6 +127,10 @@ export const RecordTable = ({ const numberOfTableRows = useRecoilValue(numberOfTableRowsState); + const isRecordTableInitialLoading = useRecoilValue( + isRecordTableInitialLoadingState, + ); + const { scopeId: objectNamePlural, resetTableRowSelection, @@ -170,7 +175,7 @@ export const RecordTable = ({ /> - {numberOfTableRows === 0 && ( + {!isRecordTableInitialLoading && numberOfTableRows === 0 && ( No {foundObjectMetadataItem?.namePlural} diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx index 0e2031af0..40caf9245 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx @@ -4,20 +4,11 @@ import { RecordTableBodyFetchMoreLoader } from '@/object-record/record-table/com import { RecordTableRow } from '@/object-record/record-table/components/RecordTableRow'; import { RowIdContext } from '@/object-record/record-table/contexts/RowIdContext'; import { RowIndexContext } from '@/object-record/record-table/contexts/RowIndexContext'; -import { isFetchingRecordTableDataState } from '@/object-record/record-table/states/isFetchingRecordTableDataState'; import { tableRowIdsState } from '@/object-record/record-table/states/tableRowIdsState'; export const RecordTableBody = () => { const tableRowIds = useRecoilValue(tableRowIdsState); - const isFetchingRecordTableData = useRecoilValue( - isFetchingRecordTableDataState, - ); - - if (isFetchingRecordTableData) { - return <>; - } - return ( <> {tableRowIds.map((rowId, rowIndex) => ( diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx index 226d7c941..02cfa6369 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx @@ -4,7 +4,6 @@ import { useRecoilCallback, useRecoilValue } from 'recoil'; import { useObjectRecordTable } from '@/object-record/hooks/useObjectRecordTable'; import { StyledRow } from '@/object-record/record-table/components/RecordTableRow'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; -import { isFetchingRecordTableDataState } from '@/object-record/record-table/states/isFetchingRecordTableDataState'; import { getRecordTableScopedStates } from '@/object-record/record-table/utils/getRecordTableScopedStates'; import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState'; @@ -16,10 +15,6 @@ export const RecordTableBodyFetchMoreLoader = () => { isFetchingMoreRecordsFamilyState(queryStateIdentifier), ); - const isFetchingRecordTableData = useRecoilValue( - isFetchingRecordTableDataState, - ); - const onLastRowVisible = useRecoilCallback( ({ set }) => async (inView: boolean) => { @@ -35,10 +30,6 @@ export const RecordTableBodyFetchMoreLoader = () => { onChange: onLastRowVisible, }); - if (isFetchingRecordTableData) { - return <>; - } - return ( {isFetchingMoreObjects && ( diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts index ba87f983a..d809bcae5 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts @@ -2,7 +2,6 @@ import { useRecoilCallback } from 'recoil'; import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; -import { isFetchingRecordTableDataState } from '@/object-record/record-table/states/isFetchingRecordTableDataState'; import { numberOfTableRowsState } from '@/object-record/record-table/states/numberOfTableRowsState'; import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; @@ -41,7 +40,6 @@ export const useSetRecordTableData = ({ set(numberOfTableRowsState, entityIds.length); onEntityCountChange(entityIds.length); - set(isFetchingRecordTableDataState, false); }, [onEntityCountChange, resetTableRowSelection], ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isFetchingRecordTableDataState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isFetchingRecordTableDataState.ts deleted file mode 100644 index bf55fe9ee..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isFetchingRecordTableDataState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atom } from 'recoil'; - -export const isFetchingRecordTableDataState = atom({ - key: 'isFetchingRecordTableDataState', - default: true, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingState.ts new file mode 100644 index 000000000..9186d0f9e --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingState.ts @@ -0,0 +1,6 @@ +import { atom } from 'recoil'; + +export const isRecordTableInitialLoadingState = atom({ + key: 'isRecordTableInitialLoadingState', + default: true, +});