fix: empty state should not appear during table loading

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

@@ -10,6 +10,7 @@ import { turnFiltersIntoObjectRecordFilters } from '@/object-record/utils/turnFi
 import { signInBackgroundMockCompanies } from '@/sign-in-background-mock/constants/signInBackgroundMockCompanies';
 
 import { useFindManyRecords } from './useFindManyRecords';
+import { isRecordTableInitialLoadingState } from '@/object-record/record-table/states/isRecordTableInitialLoadingState';
 
 export const useObjectRecordTable = () => {
   const { scopeId: objectNamePlural, setRecordTableData } = useRecordTable();
@@ -41,13 +42,16 @@ export const useObjectRecordTable = () => {
     foundObjectMetadataItem?.fields ?? [],
   );
 
+  const setIsRecordTableInitialLoading = useSetRecoilState(isRecordTableInitialLoadingState);
+
   const { records, loading, fetchMoreRecords, queryStateIdentifier } =
     useFindManyRecords({
       objectNameSingular,
       filter: requestFilters,
       orderBy,
       onCompleted: () => {
         setLastRowVisible(false);
+        setIsRecordTableInitialLoading(false);
       },
     });
 

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

@@ -20,6 +20,7 @@ import { RecordTableBody } from './RecordTableBody';
 import { RecordTableBodyEffect } from './RecordTableBodyEffect';
 import { RecordTableHeader } from './RecordTableHeader';
 import { RecordTableInternalEffect } from './RecordTableInternalEffect';
+import { isRecordTableInitialLoadingState } from '@/object-record/record-table/states/isRecordTableInitialLoadingState';
 
 const StyledObjectEmptyContainer = styled.div`
   align-items: center;
@@ -126,6 +127,8 @@ export const RecordTable = ({
 
   const numberOfTableRows = useRecoilValue(numberOfTableRowsState);
 
+  const isInitialLoading = useRecoilValue(isRecordTableInitialLoadingState);
+
   const {
     scopeId: objectNamePlural,
     resetTableRowSelection,
@@ -170,7 +173,7 @@ export const RecordTable = ({
                 />
               </div>
               <RecordTableInternalEffect tableBodyRef={tableBodyRef} />
-              {numberOfTableRows === 0 && (
+              {!isInitialLoading && numberOfTableRows === 0 && (
                 <StyledObjectEmptyContainer>
                   <StyledEmptyObjectTitle>
                     No {foundObjectMetadataItem?.namePlural}

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

@@ -4,14 +4,14 @@ 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 { isRecordTableFetchingMoreDataState } from '@/object-record/record-table/states/isRecordTableFetchingMoreDataState';
 import { tableRowIdsState } from '@/object-record/record-table/states/tableRowIdsState';
 
 export const RecordTableBody = () => {
   const tableRowIds = useRecoilValue(tableRowIdsState);
 
   const isFetchingRecordTableData = useRecoilValue(
-    isFetchingRecordTableDataState,
+    isRecordTableFetchingMoreDataState,
   );
 
   if (isFetchingRecordTableData) {

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

@@ -4,7 +4,7 @@ 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 { isRecordTableFetchingMoreDataState } from '@/object-record/record-table/states/isRecordTableFetchingMoreDataState';
 import { getRecordTableScopedStates } from '@/object-record/record-table/utils/getRecordTableScopedStates';
 import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
 
@@ -17,7 +17,7 @@ export const RecordTableBodyFetchMoreLoader = () => {
   );
 
   const isFetchingRecordTableData = useRecoilValue(
-    isFetchingRecordTableDataState,
+    isRecordTableFetchingMoreDataState,
   );
 
   const onLastRowVisible = useRecoilCallback(

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts

@@ -2,7 +2,7 @@ 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 { isRecordTableFetchingMoreDataState } from '@/object-record/record-table/states/isRecordTableFetchingMoreDataState';
 import { numberOfTableRowsState } from '@/object-record/record-table/states/numberOfTableRowsState';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
@@ -41,7 +41,7 @@ export const useSetRecordTableData = ({
 
         set(numberOfTableRowsState, entityIds.length);
         onEntityCountChange(entityIds.length);
-        set(isFetchingRecordTableDataState, false);
+        set(isRecordTableFetchingMoreDataState, false);
       },
     [onEntityCountChange, resetTableRowSelection],
   );

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

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isRecordTableFetchingMoreDataState = atom<boolean>({
+  key: 'isRecordTableFetchingMoreDataState',
+  default: true,
+});

packages/twenty-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,
+});