Optimize table loading (#866)

* wip

* wip

* Ok

* Deleted unused code

* Fixed lint

* Minor fixes

* Minor fixes

* Minor Fixes

* Minor merge fixes

* Ok

* Fix storybook tests

* Removed console.log

* Fix login

* asd

* Fixed storybook

* Added await

* Fixed await

* Added sleep for failing test

* Fix sleep

* Fix test

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/table/components/EntityTable.tsx

@@ -5,7 +5,9 @@ import { TableColumn } from '@/people/table/components/peopleColumns';
 import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
 import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside';
 
+import { useIsPageLoading } from '../../hooks/useIsPageLoading';
 import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus';
+import { useMapKeyboardToSoftFocus } from '../hooks/useMapKeyboardToSoftFocus';
 import { TableHeader } from '../table-header/components/TableHeader';
 
 import { EntityTableBody } from './EntityTableBody';
@@ -88,6 +90,8 @@ export function EntityTable<SortField>({
 }: OwnProps<SortField>) {
   const tableBodyRef = React.useRef<HTMLDivElement>(null);
 
+  useMapKeyboardToSoftFocus();
+
   const leaveTableFocus = useLeaveTableFocus();
 
   useListenClickOutside({
@@ -97,6 +101,12 @@ export function EntityTable<SortField>({
     },
   });
 
+  const isPageLoading = useIsPageLoading();
+
+  if (isPageLoading) {
+    return null;
+  }
+
   return (
     <StyledTableWithHeader>
       <TableHeader

front/src/modules/ui/table/components/EntityTableBody.tsx

@@ -2,10 +2,10 @@ import { useRecoilValue } from 'recoil';
 
 import { TableColumn } from '@/people/table/components/peopleColumns';
 import { isNavbarSwitchingSizeState } from '@/ui/layout/states/isNavbarSwitchingSizeState';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
 
 import { isFetchingEntityTableDataState } from '../states/isFetchingEntityTableDataState';
-import { RowContext } from '../states/RowContext';
+import { RowIdContext } from '../states/RowIdContext';
+import { RowIndexContext } from '../states/RowIndexContext';
 import { tableRowIdsState } from '../states/tableRowIdsState';
 
 import { EntityTableRow } from './EntityTableRow';
@@ -19,15 +19,19 @@ export function EntityTableBody({ columns }: { columns: Array<TableColumn> }) {
     isFetchingEntityTableDataState,
   );
 
+  if (isFetchingEntityTableData || isNavbarSwitchingSize) {
+    return null;
+  }
+
   return (
     <tbody>
-      {!isFetchingEntityTableData && !isNavbarSwitchingSize
-        ? rowIds.map((rowId, index) => (
-            <RecoilScope SpecificContext={RowContext} key={rowId}>
-              <EntityTableRow columns={columns} rowId={rowId} index={index} />
-            </RecoilScope>
-          ))
-        : null}
+      {rowIds.map((rowId, index) => (
+        <RowIdContext.Provider value={rowId} key={rowId}>
+          <RowIndexContext.Provider value={index}>
+            <EntityTableRow columns={columns} rowId={rowId} />
+          </RowIndexContext.Provider>
+        </RowIdContext.Provider>
+      ))}
     </tbody>
   );
 }

front/src/modules/ui/table/components/EntityTableCell.tsx

@@ -1,33 +1,19 @@
-import { useEffect } from 'react';
 import { useSetRecoilState } from 'recoil';
 
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
-
+import { RecoilScope } from '../../recoil-scope/components/RecoilScope';
 import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
-import { CellContext } from '../states/CellContext';
+import { ColumnIndexContext } from '../states/ColumnIndexContext';
 import { contextMenuPositionState } from '../states/contextMenuPositionState';
-import { currentColumnNumberScopedState } from '../states/currentColumnNumberScopedState';
 
 export function EntityTableCell({
-  rowId,
   cellIndex,
   children,
   size,
 }: {
   size: number;
-  rowId: string;
   cellIndex: number;
   children: React.ReactNode;
 }) {
-  const [, setCurrentColumnNumber] = useRecoilScopedState(
-    currentColumnNumberScopedState,
-    CellContext,
-  );
-
-  useEffect(() => {
-    setCurrentColumnNumber(cellIndex);
-  }, [cellIndex, setCurrentColumnNumber]);
-
   const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
 
   const { setCurrentRowSelected } = useCurrentRowSelected();
@@ -44,15 +30,19 @@ export function EntityTableCell({
   }
 
   return (
-    <td
-      onContextMenu={(event) => handleContextMenu(event)}
-      style={{
-        width: size,
-        minWidth: size,
-        maxWidth: size,
-      }}
-    >
-      {children}
-    </td>
+    <RecoilScope>
+      <ColumnIndexContext.Provider value={cellIndex}>
+        <td
+          onContextMenu={(event) => handleContextMenu(event)}
+          style={{
+            width: size,
+            minWidth: size,
+            maxWidth: size,
+          }}
+        >
+          {children}
+        </td>
+      </ColumnIndexContext.Provider>
+    </RecoilScope>
   );
 }

front/src/modules/ui/table/components/EntityTableRow.tsx

@@ -1,16 +1,6 @@
-import { useEffect } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
 
 import { TableColumn } from '@/people/table/components/peopleColumns';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
-
-import { CellContext } from '../states/CellContext';
-import { currentRowEntityIdScopedState } from '../states/currentRowEntityIdScopedState';
-import { currentRowNumberScopedState } from '../states/currentRowNumberScopedState';
-import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState';
-import { RowContext } from '../states/RowContext';
 
 import { CheckboxCell } from './CheckboxCell';
 import { EntityTableCell } from './EntityTableCell';
@@ -23,56 +13,24 @@ const StyledRow = styled.tr<{ selected: boolean }>`
 export function EntityTableRow({
   columns,
   rowId,
-  index,
 }: {
   columns: TableColumn[];
   rowId: string;
-  index: number;
 }) {
-  const [currentRowEntityId, setCurrentRowEntityId] = useRecoilScopedState(
-    currentRowEntityIdScopedState,
-    RowContext,
-  );
-
-  const isCurrentRowSelected = useRecoilValue(isRowSelectedFamilyState(rowId));
-
-  const [, setCurrentRowNumber] = useRecoilScopedState(
-    currentRowNumberScopedState,
-    RowContext,
-  );
-
-  useEffect(() => {
-    if (currentRowEntityId !== rowId) {
-      setCurrentRowEntityId(rowId);
-    }
-  }, [rowId, setCurrentRowEntityId, currentRowEntityId]);
-
-  useEffect(() => {
-    setCurrentRowNumber(index);
-  }, [index, setCurrentRowNumber]);
-
   return (
-    <StyledRow
-      key={rowId}
-      data-testid={`row-id-${rowId}`}
-      selected={isCurrentRowSelected}
-    >
+    <StyledRow data-testid={`row-id-${rowId}`} selected={false}>
       <td>
         <CheckboxCell />
       </td>
       {columns.map((column, columnIndex) => {
         return (
-          <RecoilScope SpecificContext={CellContext} key={column.id.toString()}>
-            <RecoilScope>
-              <EntityTableCell
-                rowId={rowId}
-                size={column.size}
-                cellIndex={columnIndex}
-              >
-                {column.cellComponent}
-              </EntityTableCell>
-            </RecoilScope>
-          </RecoilScope>
+          <EntityTableCell
+            key={column.id}
+            size={column.size}
+            cellIndex={columnIndex}
+          >
+            {column.cellComponent}
+          </EntityTableCell>
         );
       })}
       <td></td>

front/src/modules/ui/table/components/HooksEntityTable.tsx

@@ -1,25 +0,0 @@
-import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
-
-import { useInitializeEntityTable } from '../hooks/useInitializeEntityTable';
-import { useInitializeEntityTableFilters } from '../hooks/useInitializeEntityTableFilters';
-import { useMapKeyboardToSoftFocus } from '../hooks/useMapKeyboardToSoftFocus';
-
-export function HooksEntityTable({
-  numberOfColumns,
-  availableFilters,
-}: {
-  numberOfColumns: number;
-  availableFilters: FilterDefinition[];
-}) {
-  useMapKeyboardToSoftFocus();
-
-  useInitializeEntityTable({
-    numberOfColumns,
-  });
-
-  useInitializeEntityTableFilters({
-    availableFilters,
-  });
-
-  return <></>;
-}