From 62e78ac76fd44b6d74ecb92abf5ae384fabe1346 Mon Sep 17 00:00:00 2001
From: Andrey Kud <a-kud@users.noreply.github.com>
Date: Tue, 19 Dec 2023 17:37:43 -0300
Subject: [PATCH] feat: add initla load tracking

---
 .../hooks/useObjectRecordTable.ts             |  4 ++++
 .../record-table/components/RecordTable.tsx   | 19 +++++++++++++++++++
 .../components/RecordTableBody.tsx            |  4 ++--
 .../RecordTableBodyFetchMoreLoader.tsx        |  4 ++--
 .../hooks/internal/useSetRecordTableData.ts   |  4 ++--
 .../states/isFetchingRecordTableDataState.ts  |  6 ------
 .../isRecordTableFetchingMoreDataState.ts     |  6 ++++++
 .../isRecordTableInitialLoadingState.ts       |  6 ++++++
 8 files changed, 41 insertions(+), 12 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/isRecordTableFetchingMoreDataState.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 a541b0ae6f5f..3ad481b37710 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 90e3343bd39a..ed41b64cb5fb 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 = ({
                 />
               </div>
               <RecordTableInternalEffect tableBodyRef={tableBodyRef} />
+              {!isInitialLoading && numberOfTableRows === 0 && (
+                <StyledObjectEmptyContainer>
+                  <StyledEmptyObjectTitle>
+                    No {foundObjectMetadataItem?.namePlural}
+                  </StyledEmptyObjectTitle>
+                  <StyledEmptyObjectSubTitle>
+                    Create one:
+                  </StyledEmptyObjectSubTitle>
+                  <Button
+                    Icon={IconPlus}
+                    title={`Add a ${foundObjectMetadataItem?.nameSingular}`}
+                    variant={'secondary'}
+                    onClick={createRecord}
+                  />
+                </StyledObjectEmptyContainer>
+              )}
             </StyledTableContainer>
           </StyledTableWithHeader>
         </EntityUpdateMutationContext.Provider>
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 0e2031af0840..078193d8e66c 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 226d7c9411cc..c6b97791e25e 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 ba87f983ab84..c69ab8b3d932 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 bf55fe9ee500..000000000000
--- 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<boolean>({
-  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 000000000000..599b3eb224f8
--- /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<boolean>({
+  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 000000000000..9186d0f9ebf2
--- /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<boolean>({
+  key: 'isRecordTableInitialLoadingState',
+  default: true,
+});