Refactored all FieldDisplay types for performance optimization (#5768)

This PR is the second part of
https://github.com/twentyhq/twenty/pull/5693.

It optimizes all remaining field types.

The observed improvements are :
- x2 loading time improvement on table rows
- more consistent render time

Here's a summary of measured improvements, what's given here is the
average of hundreds of renders with a React Profiler component. (in our
Storybook performance stories)

| Component | Before (µs) | After (µs) |
| ----- | ------------- | --- |
| TextFieldDisplay | 127 | 83 |
| EmailFieldDisplay | 117 | 83 |
| NumberFieldDisplay | 97 | 56 |
| DateFieldDisplay | 240 | 52 |
| CurrencyFieldDisplay | 236 | 110 |
| FullNameFieldDisplay | 131 | 85 |
| AddressFieldDisplay | 118 | 81 |
| BooleanFieldDisplay | 130 | 100 |
| JSONFieldDisplay | 248 | 49 |
| LinksFieldDisplay | 1180 | 140 |
| LinkFieldDisplay | 140 | 78 |
| MultiSelectFieldDisplay | 770 | 130 |
| SelectFieldDisplay | 230 | 87 |

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

@@ -35,7 +35,6 @@ export const Default: Story = {
     await canvas.findByText('People');
     await canvas.findAllByText('Companies');
     await canvas.findByText('Opportunities');
-    await canvas.findByText('Listings');
     await canvas.findByText('My Customs');
   },
 };

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

@@ -8,11 +8,13 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { mockedPeopleData } from '~/testing/mock-data/people';
+import { getPeopleMock } from '~/testing/mock-data/people';
 import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
 
 import { RecordShowPage } from '../RecordShowPage';
 
+const peopleMock = getPeopleMock();
+
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/ObjectRecord/RecordShowPage',
   component: RecordShowPage,
@@ -29,7 +31,7 @@ const meta: Meta<PageDecoratorArgs> = {
         graphql.query('FindOnePerson', () => {
           return HttpResponse.json({
             data: {
-              person: mockedPeopleData[0],
+              person: peopleMock[0],
             },
           });
         }),
@@ -87,7 +89,9 @@ export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    await canvas.findAllByText('Alexandre Prot');
+    await canvas.findAllByText(
+      peopleMock[0].name.firstName + ' ' + peopleMock[0].name.lastName,
+    );
     await canvas.findByText('Add your first Activity');
   },
 };
@@ -99,7 +103,11 @@ export const Loading: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    expect(canvas.queryByText('Alexandre Prot')).toBeNull();
+    expect(
+      canvas.queryByText(
+        peopleMock[0].name.firstName + ' ' + peopleMock[0].name.lastName,
+      ),
+    ).toBeNull();
     expect(canvas.queryByText('Add your first Activity')).toBeNull();
   },
 };