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 <[email protected]>
twentyhq · Dec 20, 2023 · dd044e8 · dd044e8
1 parent d59a371
commit dd044e8
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 27 deletions.
diff --git 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,13 +42,18 @@ export const useObjectRecordTable = () => {
     foundObjectMetadataItem?.fields ?? [],
   );
 
+  const setIsRecordTableInitialLoading = useSetRecoilState(
+    isRecordTableInitialLoadingState,
+  );
+
   const { records, loading, fetchMoreRecords, queryStateIdentifier } =
     useFindManyRecords({
       objectNameSingular,
       filter: requestFilters,
       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
@@ -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 = ({
                 />
               </div>
               <RecordTableInternalEffect tableBodyRef={tableBodyRef} />
-              {numberOfTableRows === 0 && (
+              {!isRecordTableInitialLoading && numberOfTableRows === 0 && (
                 <StyledObjectEmptyContainer>
                   <StyledEmptyObjectTitle>
                     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
@@ -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/...ront/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx b/...ront/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 (
     <tbody ref={tbodyRef}>
       {isFetchingMoreObjects && (

diff --git a/...enty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts b/...enty-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/...nty-front/src/modules/object-record/record-table/states/isFetchingRecordTableDataState.ts b/...nty-front/src/modules/object-record/record-table/states/isFetchingRecordTableDataState.ts
diff --git a/...y-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingState.ts b/...y-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingState.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isRecordTableInitialLoadingState = atom<boolean>({
+  key: 'isRecordTableInitialLoadingState',
+  default: true,
+});