Added Linaria for performance optimization (#5693)

- Added Linaria to have compiled CSS on our optimized field displays
- Refactored mocks for performance stories on fields
- Refactored generateRecordChipData into a global context, computed only
when we fetch object metadata items.
- Refactored ChipFieldDisplay 
- Refactored PhoneFieldDisplay

packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect';
+import { PreComputedChipGeneratorsContext } from '@/object-metadata/context/PreComputedChipGeneratorsContext';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
+import { getRecordChipGeneratorPerObjectPerField } from '@/object-record/utils/getRecordChipGeneratorPerObjectPerField';
 import { UserOrMetadataLoader } from '~/loading/components/UserOrMetadataLoader';
 
 export const ObjectMetadataItemsProvider = ({
@@ -13,13 +15,23 @@ export const ObjectMetadataItemsProvider = ({
 
   const shouldDisplayChildren = objectMetadataItems.length > 0;
 
+  const chipGeneratorPerObjectPerField = useMemo(() => {
+    return getRecordChipGeneratorPerObjectPerField(objectMetadataItems);
+  }, [objectMetadataItems]);
+
   return (
     <>
       <ObjectMetadataItemsLoadEffect />
       {shouldDisplayChildren ? (
-        <RelationPickerScope relationPickerScopeId="relation-picker">
-          {children}
-        </RelationPickerScope>
+        <PreComputedChipGeneratorsContext.Provider
+          value={{
+            chipGeneratorPerObjectPerField,
+          }}
+        >
+          <RelationPickerScope relationPickerScopeId="relation-picker">
+            {children}
+          </RelationPickerScope>
+        </PreComputedChipGeneratorsContext.Provider>
       ) : (
         <UserOrMetadataLoader />
       )}

packages/twenty-front/src/modules/object-metadata/context/PreComputedChipGeneratorsContext.ts

@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+
+import { RecordChipData } from '@/object-record/record-field/types/RecordChipData';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+
+export type ChipGeneratorPerObjectPerField = Record<
+  string,
+  Record<string, (record: ObjectRecord) => RecordChipData>
+>;
+
+export type PreComputedChipGeneratorsContextProps = {
+  chipGeneratorPerObjectPerField: ChipGeneratorPerObjectPerField;
+};
+
+export const PreComputedChipGeneratorsContext =
+  createContext<PreComputedChipGeneratorsContextProps>(
+    {} as PreComputedChipGeneratorsContextProps,
+  );