Refacto views (#10272)

In this huge (sorry!) PR:
- introducing objectMetadataItem in contextStore instead of
objectMetadataId which is more convenient
- splitting some big hooks into smaller parts to avoid re-renders
- removing Effects to avoid re-renders (especially onViewChange)
- making the view prefetch separate from favorites to avoid re-renders
- making the view prefetch load a state and add selectors on top of it
to avoir re-renders

As a result, the performance is WAY better (I suspect the favorite
implementation to trigger a lot of re-renders unfortunately).
However, we are still facing a random app freeze on view creation. I
could not investigate the root cause. As this seems to be already there
in the precedent release, we can move forward but this seems a urgent
follow up to me ==> EDIT: I've found the root cause after a few ours of
deep dive... an infinite loop in RecordTableNoRecordGroupBodyEffect...

prastoin edit: close https://github.com/twentyhq/twenty/issues/10253

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: prastoin <paul@twenty.com>

packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx

@@ -5,12 +5,10 @@ import { RESET_CONTEXT_TO_SELECTION } from '@/command-menu/constants/ResetContex
 import { useMatchingCommandMenuCommands } from '@/command-menu/hooks/useMatchingCommandMenuCommands';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { Command } from '@/command-menu/types/Command';
-import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
-import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useLingui } from '@lingui/react/macro';
-import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared';
 
@@ -50,23 +48,19 @@ export const CommandMenu = () => {
     )
     .filter(isDefined);
 
-  const previousContextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
-    contextStoreCurrentObjectMetadataIdComponentState,
-    'command-menu-previous',
-  );
+  const previousContextStoreCurrentObjectMetadataItem =
+    useRecoilComponentValueV2(
+      contextStoreCurrentObjectMetadataItemComponentState,
+      'command-menu-previous',
+    );
 
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
-  const currentObjectMetadataId = useRecoilComponentValueV2(
-    contextStoreCurrentObjectMetadataIdComponentState,
-  );
-
-  const currentObjectMetadataItem = objectMetadataItems.find(
-    (objectMetadataItem) => objectMetadataItem.id === currentObjectMetadataId,
+  const currentObjectMetadataItem = useRecoilComponentValueV2(
+    contextStoreCurrentObjectMetadataItemComponentState,
   );
 
   const selectableItemIds = selectableItems.map((item) => item.id);
 
-  if (isNonEmptyString(previousContextStoreCurrentObjectMetadataId)) {
+  if (isDefined(previousContextStoreCurrentObjectMetadataItem)) {
     selectableItemIds.unshift(RESET_CONTEXT_TO_SELECTION);
   }
 
@@ -103,7 +97,7 @@ export const CommandMenu = () => {
       selectableItemIds={selectableItemIds}
       noResults={noResults}
     >
-      {isNonEmptyString(previousContextStoreCurrentObjectMetadataId) && (
+      {isDefined(previousContextStoreCurrentObjectMetadataItem) && (
         <CommandGroup heading={t`Context`}>
           <SelectableItem itemId={RESET_CONTEXT_TO_SELECTION}>
             <ResetContextToSelectionCommandButton />

packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx

@@ -9,7 +9,7 @@ import { commandMenuNavigationStackState } from '@/command-menu/states/commandMe
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
-import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
+import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useTheme } from '@emotion/react';
@@ -96,8 +96,8 @@ export const CommandMenuTopBar = () => {
 
   const { closeCommandMenu, goBackFromCommandMenu } = useCommandMenu();
 
-  const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
-    contextStoreCurrentObjectMetadataIdComponentState,
+  const contextStoreCurrentObjectMetadataItem = useRecoilComponentValueV2(
+    contextStoreCurrentObjectMetadataItemComponentState,
   );
 
   const commandMenuPage = useRecoilValue(commandMenuPageState);
@@ -137,11 +137,11 @@ export const CommandMenuTopBar = () => {
                 testId="command-menu-go-back-button"
               />
             )}
-            {isDefined(contextStoreCurrentObjectMetadataId) &&
+            {isDefined(contextStoreCurrentObjectMetadataItem) &&
             commandMenuPage !== CommandMenuPages.SearchRecords ? (
               <CommandMenuContextChipGroupsWithRecordSelection
                 contextChips={contextChips}
-                objectMetadataItemId={contextStoreCurrentObjectMetadataId}
+                objectMetadataItemId={contextStoreCurrentObjectMetadataItem.id}
               />
             ) : (
               <CommandMenuContextChipGroups contextChips={contextChips} />

packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx

@@ -2,7 +2,7 @@ import { CommandMenuContextRecordChip } from '@/command-menu/components/CommandM
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { RESET_CONTEXT_TO_SELECTION } from '@/command-menu/constants/ResetContextToSelection';
 import { useResetPreviousCommandMenuContext } from '@/command-menu/hooks/useResetPreviousCommandMenuContext';
-import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
+import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -17,8 +17,8 @@ export const ResetContextToSelectionCommandButton = () => {
     'command-menu-previous',
   );
 
-  const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
-    contextStoreCurrentObjectMetadataIdComponentState,
+  const contextStoreCurrentObjectMetadataItem = useRecoilComponentValueV2(
+    contextStoreCurrentObjectMetadataItemComponentState,
     'command-menu-previous',
   );
 
@@ -26,7 +26,7 @@ export const ResetContextToSelectionCommandButton = () => {
 
   const objectMetadataItem = objectMetadataItems.find(
     (objectMetadataItem) =>
-      objectMetadataItem.id === contextStoreCurrentObjectMetadataId,
+      objectMetadataItem.id === contextStoreCurrentObjectMetadataItem?.id,
   );
 
   const { resetPreviousCommandMenuContext } =