feat: add initla load tracking

twentyhq · Dec 19, 2023 · 62e78ac · 62e78ac
1 parent ed6438a
commit 62e78ac
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 12 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
@@ -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);
       },
     });
 

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
@@ -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
@@ -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/...ront/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx b/...ront/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/...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,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/...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/...front/src/modules/object-record/record-table/states/isRecordTableFetchingMoreDataState.ts b/...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/...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,
+});