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/testing/graphqlMocks.ts

@@ -8,20 +8,24 @@ import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { mockedActivities } from '~/testing/mock-data/activities';
 import {
-  mockedCompaniesData,
-  mockedDuplicateCompanyData,
+  getCompaniesMock,
+  getCompanyDuplicateMock,
 } from '~/testing/mock-data/companies';
 import { mockedClientConfig } from '~/testing/mock-data/config';
 import { mockedObjectMetadataItemsQueryResult } from '~/testing/mock-data/metadata';
+import { getPeopleMock } from '~/testing/mock-data/people';
 import { mockedRemoteTables } from '~/testing/mock-data/remote-tables';
 import { mockedUsersData } from '~/testing/mock-data/users';
 import { mockedViewsData } from '~/testing/mock-data/views';
 import { mockWorkspaceMembers } from '~/testing/mock-data/workspace-members';
 
-import { mockedPeopleData } from './mock-data/people';
 import { mockedRemoteServers } from './mock-data/remote-servers';
 import { mockedViewFieldsData } from './mock-data/view-fields';
 
+const peopleMock = getPeopleMock();
+const companiesMock = getCompaniesMock();
+const duplicateCompanyMock = getCompanyDuplicateMock();
+
 export const metadataGraphql = graphql.link(
   `${REACT_APP_SERVER_BASE_URL}/metadata`,
 );
@@ -108,8 +112,8 @@ export const graphqlMocks = {
     }),
     graphql.query('FindManyCompanies', ({ variables }) => {
       const mockedData = variables.limit
-        ? mockedCompaniesData.slice(0, variables.limit)
-        : mockedCompaniesData;
+        ? companiesMock.slice(0, variables.limit)
+        : companiesMock;
 
       return HttpResponse.json({
         data: {
@@ -157,7 +161,7 @@ export const graphqlMocks = {
             edges: [
               {
                 node: {
-                  ...mockedDuplicateCompanyData,
+                  ...duplicateCompanyMock,
                   favorites: {
                     edges: [],
                     __typename: 'FavoriteConnection',
@@ -197,7 +201,7 @@ export const graphqlMocks = {
       return HttpResponse.json({
         data: {
           people: {
-            edges: mockedPeopleData.map((person) => ({
+            edges: peopleMock.map((person) => ({
               node: person,
               cursor: null,
             })),