Prefetch Skeleton Loading on Indexes and Shows (#5545)

### Description
Prefetch Skeleton Loading on Indexes and Shows

### Refs
#4458

### Demo

https://jam.dev/c/a1ad04e1-80b6-4b2a-b7df-373f52f4b169

https://jam.dev/c/c5038b97-2f18-4c29-8dee-18c09376e5ee

Fixes: #4458

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -1,9 +1,12 @@
+import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 
 import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
+import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { RecordIndexPage } from '../RecordIndexPage';
@@ -27,4 +30,26 @@ export default meta;
 
 export type Story = StoryObj<typeof RecordIndexPage>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  decorators: [PrefetchLoadingDecorator],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText('People');
+    await canvas.findAllByText('Companies');
+    await canvas.findByText('Opportunities');
+    await canvas.findByText('Listings');
+    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

@@ -1,3 +1,4 @@
+import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
 import { graphql, HttpResponse } from 'msw';
@@ -6,6 +7,7 @@ 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';
@@ -15,7 +17,6 @@ import { RecordShowPage } from '../RecordShowPage';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/ObjectRecord/RecordShowPage',
   component: RecordShowPage,
-  decorators: [PageDecorator],
   args: {
     routePath: '/object/:objectNameSingular/:objectRecordId',
     routeParams: {
@@ -81,6 +82,9 @@ export default meta;
 export type Story = StoryObj<typeof RecordShowPage>;
 
 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);
 
@@ -88,3 +92,15 @@ export const Default: Story = {
     await canvas.findByText('Add your first Activity');
   },
 };
+
+export const Loading: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  decorators: [PageDecorator],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.queryByText('Alexandre Prot')).toBeNull();
+    expect(canvas.queryByText('Add your first Activity')).toBeNull();
+  },
+};