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/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>
   );
 }