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 a541b0ae6f5fe..3ad481b37710e 100644
--- a/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts
+++ b/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,6 +42,8 @@ export const useObjectRecordTable = () => {
foundObjectMetadataItem?.fields ?? [],
);
+ const setIsRecordTableInitialLoading = useSetRecoilState(isRecordTableInitialLoadingState);
+
const { records, loading, fetchMoreRecords, queryStateIdentifier } =
useFindManyRecords({
objectNameSingular,
@@ -48,6 +51,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 90e3343bd39ab..ed41b64cb5fb8 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
@@ -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,6 +173,22 @@ export const RecordTable = ({
/>
+ {!isInitialLoading && numberOfTableRows === 0 && (
+
+
+ No {foundObjectMetadataItem?.namePlural}
+
+
+ Create one:
+
+
+
+ )}
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 0e2031af08402..078193d8e66c7 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,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) {
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 226d7c9411cc3..c6b97791e25ee 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,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(
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 ba87f983ab84b..c69ab8b3d932d 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,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],
);
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 bf55fe9ee5002..0000000000000
--- 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/isRecordTableFetchingMoreDataState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableFetchingMoreDataState.ts
new file mode 100644
index 0000000000000..599b3eb224f8d
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableFetchingMoreDataState.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isRecordTableFetchingMoreDataState = atom({
+ key: 'isRecordTableFetchingMoreDataState',
+ 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 0000000000000..9186d0f9ebf2f
--- /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,
+});