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();
+  },
+};