Add storybook tests for User & Metadata loading (#5650)

### Description
Add storybook tests for User & Metadata loading

### Refs
#5590

### Demo



https://github.com/twentyhq/twenty/assets/140154534/2434fc50-8d95-420b-9f62-6fbdf43ce9e5


Fixes #5590

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

packages/twenty-front/src/loading/components/__stories__/PrefetchLoading.stories.tsx

@@ -0,0 +1,47 @@
+import { expect } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+
+import { RecordIndexPage } from '~/pages/object-record/RecordIndexPage';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'App/Loading/PrefetchLoading',
+  component: RecordIndexPage,
+  args: {
+    routePath: '/objects/:objectNamePlural',
+    routeParams: {
+      ':objectNamePlural': 'companies',
+    },
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof RecordIndexPage>;
+
+export const Default: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText('Search');
+    await canvas.findByText('Settings');
+    await canvas.findByText('Tasks');
+
+    expect(canvas.queryByText('People')).toBeNull();
+    expect(canvas.queryByText('Opportunities')).toBeNull();
+    expect(canvas.queryByText('Listings')).toBeNull();
+    expect(canvas.queryByText('My Customs')).toBeNull();
+  },
+};

packages/twenty-front/src/loading/components/__stories__/UserOrMetadataLoader.stories.tsx

@@ -0,0 +1,87 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { expect } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+import { graphql, HttpResponse } from 'msw';
+
+import { GET_CLIENT_CONFIG } from '@/client-config/graphql/queries/getClientConfig';
+import { FIND_MANY_OBJECT_METADATA_ITEMS } from '@/object-metadata/graphql/queries';
+import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
+import { RecordIndexPage } from '~/pages/object-record/RecordIndexPage';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks, metadataGraphql } from '~/testing/graphqlMocks';
+import { mockedClientConfig } from '~/testing/mock-data/config';
+import { mockedUsersData } from '~/testing/mock-data/users';
+
+const userMetadataLoaderMocks = {
+  msw: {
+    handlers: [
+      graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
+        return HttpResponse.json({
+          data: {
+            currentUser: mockedUsersData[0],
+          },
+        });
+      }),
+      graphql.query(getOperationName(GET_CLIENT_CONFIG) ?? '', () => {
+        return HttpResponse.json({
+          data: {
+            clientConfig: mockedClientConfig,
+          },
+        });
+      }),
+      metadataGraphql.query(
+        getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? '',
+        () => {
+          return HttpResponse.json({
+            data: {
+              objects: {
+                // simulate no metadata items
+                edges: [],
+              },
+            },
+          });
+        },
+      ),
+    ],
+  },
+};
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'App/Loading/UserOrMetadataLoader',
+  component: RecordIndexPage,
+  args: {
+    routePath: '/objects/:objectNamePlural',
+    routeParams: {
+      ':objectNamePlural': 'companies',
+    },
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof RecordIndexPage>;
+
+export const Default: Story = {
+  parameters: userMetadataLoaderMocks,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  decorators: [PageDecorator],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.queryByText('Search')).toBeNull();
+    expect(canvas.queryByText('Settings')).toBeNull();
+    expect(canvas.queryByText('Tasks')).toBeNull();
+    expect(canvas.queryByText('People')).toBeNull();
+    expect(canvas.queryByText('Opportunities')).toBeNull();
+    expect(canvas.queryByText('Listings')).toBeNull();
+    expect(canvas.queryByText('My Customs')).toBeNull();
+  },
+};

packages/twenty-front/src/modules/object-metadata/components/__stories__/ObjectMetadataNavItems.stories.tsx

@@ -6,7 +6,6 @@ import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/Componen
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
@@ -21,7 +20,6 @@ const meta: Meta<typeof ObjectMetadataNavItems> = {
     ComponentWithRouterDecorator,
     ComponentWithRecoilScopeDecorator,
     SnackBarDecorator,
-    PrefetchLoadingDecorator,
   ],
   parameters: {
     msw: graphqlMocks,

packages/twenty-front/src/modules/support/components/__stories__/SupportChat.stories.tsx

@@ -7,7 +7,6 @@ import { currentUserState } from '@/auth/states/currentUserState';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { supportChatState } from '@/client-config/states/supportChatState';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import {
   mockDefaultWorkspace,
@@ -36,7 +35,6 @@ const meta: Meta<typeof SupportChat> = {
 
       return <Story />;
     },
-    PrefetchLoadingDecorator,
   ],
   parameters: {
     msw: graphqlMocks,

packages/twenty-front/src/pages/auth/__stories__/ChooseYourPlan.stories.tsx

@@ -9,7 +9,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
 import { sleep } from '~/testing/sleep';
@@ -19,7 +18,7 @@ import { ChooseYourPlan } from '../ChooseYourPlan';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/ChooseYourPlan',
   component: ChooseYourPlan,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: AppPath.PlanRequired },
   parameters: {
     msw: {

packages/twenty-front/src/pages/auth/__stories__/CreateProfile.stories.tsx

@@ -9,7 +9,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
 
@@ -18,7 +17,7 @@ import { CreateProfile } from '../CreateProfile';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/CreateProfile',
   component: CreateProfile,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: AppPath.CreateProfile },
   parameters: {
     msw: {

packages/twenty-front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx

@@ -11,7 +11,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
 
@@ -26,7 +25,6 @@ const meta: Meta<PageDecoratorArgs> = {
       setCurrentWorkspace(mockedOnboardingUsersData[1].defaultWorkspace);
       return <Story />;
     },
-    PrefetchLoadingDecorator,
     PageDecorator,
   ],
   args: { routePath: AppPath.CreateWorkspace },

packages/twenty-front/src/pages/auth/__stories__/PasswordReset.stories.tsx

@@ -10,14 +10,13 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/PasswordReset',
   component: PasswordReset,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/reset-password/:passwordResetToken',
     routeParams: { ':passwordResetToken': 'MOCKED_TOKEN' },

packages/twenty-front/src/pages/auth/__stories__/PaymentSuccess.stories.tsx

@@ -9,7 +9,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
 
@@ -18,7 +17,7 @@ import { PaymentSuccess } from '../PaymentSuccess';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/PaymentSuccess',
   component: PaymentSuccess,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: AppPath.PlanRequiredSuccess },
   parameters: {
     msw: {

packages/twenty-front/src/pages/auth/__stories__/SignInUp.stories.tsx

@@ -9,7 +9,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { SignInUp } from '../SignInUp';
@@ -17,7 +16,7 @@ import { SignInUp } from '../SignInUp';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/SignInUp',
   component: SignInUp,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: AppPath.SignInUp },
   parameters: {
     msw: {

packages/twenty-front/src/pages/impersonate/__stories__/ImpersonateEffect.stories.tsx

@@ -5,7 +5,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';
 
@@ -14,7 +13,7 @@ import { ImpersonateEffect } from '../ImpersonateEffect';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Impersonate/Impersonate',
   component: ImpersonateEffect,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: AppPath.Impersonate,
     routeParams: { ':userId': '1' },

packages/twenty-front/src/pages/object-record/__stories__/RecordIndexPage.stories.tsx

@@ -1,4 +1,3 @@
-import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
 
@@ -6,7 +5,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { RecordIndexPage } from '../RecordIndexPage';
@@ -31,7 +29,6 @@ export default meta;
 export type Story = StoryObj<typeof RecordIndexPage>;
 
 export const Default: Story = {
-  decorators: [PrefetchLoadingDecorator],
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -42,14 +39,3 @@ export const Default: Story = {
     await canvas.findByText('My Customs');
   },
 };
-
-export const Loading: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    expect(canvas.queryByText('People')).toBeNull();
-    expect(canvas.queryByText('Opportunities')).toBeNull();
-    expect(canvas.queryByText('Listings')).toBeNull();
-    expect(canvas.queryByText('My Customs')).toBeNull();
-  },
-};

packages/twenty-front/src/pages/object-record/__stories__/RecordShowPage.stories.tsx

@@ -7,7 +7,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedPeopleData } from '~/testing/mock-data/people';
 import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
@@ -84,7 +83,7 @@ export type Story = StoryObj<typeof RecordShowPage>;
 export const Default: Story = {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 

packages/twenty-front/src/pages/settings/__stories__/SettingsAppearance.stories.tsx

@@ -4,7 +4,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { SettingsAppearance } from '../SettingsAppearance';
@@ -12,7 +11,7 @@ import { SettingsAppearance } from '../SettingsAppearance';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsAppearance',
   component: SettingsAppearance,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: '/settings/appearance' },
   parameters: {
     msw: graphqlMocks,

packages/twenty-front/src/pages/settings/__stories__/SettingsBilling.stories.tsx

@@ -7,7 +7,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';
 
@@ -16,7 +15,7 @@ import { SettingsBilling } from '../SettingsBilling';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsBilling',
   component: SettingsBilling,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: getSettingsPagePath(SettingsPath.Billing) },
   parameters: {
     msw: graphqlMocks,

packages/twenty-front/src/pages/settings/__stories__/SettingsProfile.stories.tsx

@@ -5,7 +5,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { SettingsProfile } from '../SettingsProfile';
@@ -13,7 +12,7 @@ import { SettingsProfile } from '../SettingsProfile';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsProfile',
   component: SettingsProfile,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/settings/profile',
     additionalRoutes: ['/welcome'],

packages/twenty-front/src/pages/settings/__stories__/SettingsWorkspace.stories.tsx

@@ -4,7 +4,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { SettingsWorkspace } from '../SettingsWorkspace';
@@ -12,7 +11,7 @@ import { SettingsWorkspace } from '../SettingsWorkspace';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsWorkspace',
   component: SettingsWorkspace,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: '/settings/workspace' },
   parameters: {
     msw: graphqlMocks,

packages/twenty-front/src/pages/settings/__stories__/SettingsWorkspaceMembers.stories.tsx

@@ -5,7 +5,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';
 
@@ -14,7 +13,7 @@ import { SettingsWorkspaceMembers } from '../SettingsWorkspaceMembers';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsWorkspaceMembers',
   component: SettingsWorkspaceMembers,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: '/settings/workspace-members' },
   parameters: {
     msw: graphqlMocks,

packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccounts.stories.tsx

@@ -5,7 +5,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { SettingsAccounts } from '../SettingsAccounts';
@@ -13,7 +12,7 @@ import { SettingsAccounts } from '../SettingsAccounts';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Accounts/SettingsAccounts',
   component: SettingsAccounts,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/settings/accounts',
   },

packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccountsCalendars.stories.tsx

@@ -7,7 +7,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';
 
@@ -16,7 +15,7 @@ import { SettingsAccountsCalendars } from '../SettingsAccountsCalendars';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Accounts/SettingsAccountsCalendars',
   component: SettingsAccountsCalendars,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: getSettingsPagePath(SettingsPath.AccountsCalendars),
   },

packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccountsCalendarsSettings.stories.tsx

@@ -8,7 +8,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
 import { sleep } from '~/testing/sleep';
@@ -18,7 +17,7 @@ import { SettingsAccountsCalendarsSettings } from '../SettingsAccountsCalendarsS
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Accounts/SettingsAccountsCalendarsSettings',
   component: SettingsAccountsCalendarsSettings,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: getSettingsPagePath(SettingsPath.AccountsCalendarsSettings),
     routeParams: { ':accountUuid': mockedConnectedAccounts[0].id },

packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccountsEmails.stories.tsx

@@ -4,7 +4,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { SettingsAccountsEmails } from '../SettingsAccountsEmails';
@@ -12,7 +11,7 @@ import { SettingsAccountsEmails } from '../SettingsAccountsEmails';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Accounts/SettingsAccountsEmails',
   component: SettingsAccountsEmails,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/settings/accounts/emails',
   },

packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccountsEmailsInboxSettings.stories.tsx

@@ -7,13 +7,12 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Accounts/SettingsAccountsEmailsInboxSettings',
   component: SettingsAccountsEmailsInboxSettings,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/settings/accounts/emails/:accountUuid',
     routeParams: { ':accountUuid': '123' },

packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsNewAccount.stories.tsx

@@ -5,13 +5,12 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Accounts/SettingsNewAccount',
   component: SettingsNewAccount,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/settings/accounts/new',
   },

packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx

@@ -5,7 +5,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { SettingsNewObject } from '../SettingsNewObject';
@@ -13,7 +12,7 @@ import { SettingsNewObject } from '../SettingsNewObject';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/DataModel/SettingsNewObject',
   component: SettingsNewObject,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/settings/objects/new',
   },

packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx

@@ -5,7 +5,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';
 
@@ -14,7 +13,7 @@ import { SettingsObjectDetail } from '../SettingsObjectDetail';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/DataModel/SettingsObjectDetail',
   component: SettingsObjectDetail,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/settings/objects/:objectSlug',
     routeParams: { ':objectSlug': 'companies' },

packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectEdit.stories.tsx

@@ -4,7 +4,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';
 
@@ -13,7 +12,7 @@ import { SettingsObjectEdit } from '../SettingsObjectEdit';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/DataModel/SettingsObjectEdit',
   component: SettingsObjectEdit,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/settings/objects/:objectSlug/edit',
     routeParams: { ':objectSlug': 'companies' },

packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectFieldEdit.stories.tsx

@@ -4,7 +4,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { SettingsObjectFieldEdit } from '../SettingsObjectFieldEdit';
@@ -12,7 +11,7 @@ import { SettingsObjectFieldEdit } from '../SettingsObjectFieldEdit';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/DataModel/SettingsObjectFieldEdit',
   component: SettingsObjectFieldEdit,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/settings/objects/:objectSlug/:fieldSlug',
     routeParams: { ':objectSlug': 'companies', ':fieldSlug': 'name' },

packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx

@@ -5,7 +5,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { SettingsObjectNewFieldStep1 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep1';
@@ -14,7 +13,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title:
     'Pages/Settings/DataModel/SettingsObjectNewField/SettingsObjectNewFieldStep1',
   component: SettingsObjectNewFieldStep1,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/settings/objects/:objectSlug/new-field/step-1',
     routeParams: { ':objectSlug': 'companies' },

packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep2.stories.tsx

@@ -5,7 +5,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { SettingsObjectNewFieldStep2 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep2';
@@ -14,7 +13,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title:
     'Pages/Settings/DataModel/SettingsObjectNewField/SettingsObjectNewFieldStep2',
   component: SettingsObjectNewFieldStep2,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/settings/objects/:objectSlug/new-field/step-2',
     routeParams: { ':objectSlug': 'companies' },

packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjects.stories.tsx

@@ -5,7 +5,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';
 
@@ -14,7 +13,7 @@ import { SettingsObjects } from '../SettingsObjects';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/DataModel/SettingsObjects',
   component: SettingsObjects,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: '/settings/objects' },
   parameters: {
     msw: graphqlMocks,

packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopers.stories.tsx

@@ -6,14 +6,13 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Developers/SettingsDevelopers',
   component: SettingsDevelopers,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: '/settings/developers' },
   parameters: {
     msw: graphqlMocks,

packages/twenty-front/src/pages/settings/developers/__stories__/api-keys/SettingsDevelopersApiKeysDetail.stories.tsx

@@ -7,13 +7,12 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Developers/ApiKeys/SettingsDevelopersApiKeyDetail',
   component: SettingsDevelopersApiKeyDetail,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/settings/developers/api-keys/:apiKeyId',
     routeParams: {

packages/twenty-front/src/pages/settings/developers/__stories__/api-keys/SettingsDevelopersApiKeysNew.stories.tsx

@@ -6,13 +6,12 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Developers/ApiKeys/SettingsDevelopersApiKeysNew',
   component: SettingsDevelopersApiKeysNew,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: '/settings/developers/api-keys/new' },
   parameters: {
     msw: graphqlMocks,

packages/twenty-front/src/pages/settings/developers/__stories__/webhooks/SettingsDevelopersWebhooksDetail.stories.tsx

@@ -7,13 +7,12 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Developers/Webhooks/SettingsDevelopersWebhooksDetail',
   component: SettingsDevelopersWebhooksDetail,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/settings/developers/webhooks/:webhookId',
     routeParams: { ':webhookId': '1234' },

packages/twenty-front/src/pages/settings/developers/__stories__/webhooks/SettingsDevelopersWebhooksNew.stories.tsx

@@ -6,13 +6,12 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Developers/Webhooks/SettingsDevelopersWebhooksNew',
   component: SettingsDevelopersWebhooksNew,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: '/settings/developers' },
   parameters: {
     msw: graphqlMocks,

packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationDatabase.stories.tsx

@@ -8,14 +8,13 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Integrations/SettingsIntegrationDatabase',
   component: SettingsIntegrationDatabase,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: getSettingsPagePath(SettingsPath.IntegrationDatabase),
     routeParams: { ':databaseKey': 'postgresql' },

packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationEditDatabaseConnection.stories.tsx

@@ -6,7 +6,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';
 
@@ -14,7 +13,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title:
     'Pages/Settings/Integrations/SettingsIntegrationEditDatabaseConnection',
   component: SettingsIntegrationEditDatabaseConnection,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/settings/integrations/:databaseKey/edit',
     routeParams: {

packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationNewDatabaseConnection.stories.tsx

@@ -6,14 +6,13 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Integrations/SettingsIntegrationNewDatabaseConnection',
   component: SettingsIntegrationNewDatabaseConnection,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/settings/integrations/:databaseKey/new',
     routeParams: { ':databaseKey': 'postgresql' },

packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationShowDatabaseConnection.stories.tsx

@@ -8,7 +8,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';
 
@@ -16,7 +15,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title:
     'Pages/Settings/Integrations/SettingsIntegrationShowDatabaseConnection',
   component: SettingsIntegrationShowDatabaseConnection,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: getSettingsPagePath(SettingsPath.IntegrationDatabaseConnection),
     routeParams: {

packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrations.stories.tsx

@@ -8,14 +8,13 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Integrations/SettingsIntegrations',
   component: SettingsIntegrations,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: getSettingsPagePath(SettingsPath.Integrations) },
   parameters: {
     msw: graphqlMocks,

packages/twenty-front/src/pages/tasks/__stories__/Tasks.stories.tsx

@@ -6,7 +6,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
 import { sleep } from '~/testing/sleep';
@@ -16,7 +15,7 @@ import { Tasks } from '../Tasks';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Tasks/Default',
   component: Tasks,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: AppPath.TasksPage },
   parameters: {
     msw: {

packages/twenty-front/src/testing/decorators/PrefetchLoadingDecorator.tsx

@@ -12,8 +12,8 @@ export const PrefetchLoadingDecorator: Decorator = (Story) => {
     prefetchIsLoadedFamilyState(PrefetchKey.AllFavorites),
   );
 
-  setAreViewsPrefetched(true);
+  setAreViewsPrefetched(false);
-  setAreFavoritesPrefetched(true);
+  setAreFavoritesPrefetched(false);
 
   return <Story />;
 };

packages/twenty-front/src/testing/graphqlMocks.ts

@@ -22,7 +22,9 @@ import { mockedPeopleData } from './mock-data/people';
 import { mockedRemoteServers } from './mock-data/remote-servers';
 import { mockedViewFieldsData } from './mock-data/view-fields';
 
-const metadataGraphql = graphql.link(`${REACT_APP_SERVER_BASE_URL}/metadata`);
+export const metadataGraphql = graphql.link(
+  `${REACT_APP_SERVER_BASE_URL}/metadata`,
+);
 
 export const graphqlMocks = {
   handlers: [