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-ui/src/theme/index.ts

@@ -34,6 +34,7 @@ export * from './constants/TextInputStyle';
 export * from './constants/ThemeCommon';
 export * from './constants/ThemeDark';
 export * from './constants/ThemeLight';
+export * from './provider/ThemeContextProvider';
 export * from './provider/ThemeProvider';
 export * from './types/ThemeType';
 export * from './utils/getNextThemeColor';

packages/twenty-ui/src/theme/provider/ThemeContextProvider.tsx

@@ -0,0 +1,23 @@
+import { createContext } from 'react';
+
+import { ThemeType } from '@ui/theme/types/ThemeType';
+
+export type ThemeContextType = {
+  theme: ThemeType;
+};
+
+export const ThemeContext = createContext<ThemeContextType>(
+  {} as ThemeContextType,
+);
+
+export const ThemeContextProvider = ({
+  children,
+  theme,
+}: {
+  children: React.ReactNode;
+  theme: ThemeType;
+}) => {
+  return (
+    <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>
+  );
+};

packages/twenty-ui/src/theme/provider/ThemeProvider.tsx

@@ -1,6 +1,8 @@
 import { ReactNode, useEffect } from 'react';
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 
+import { ThemeContextProvider } from '@ui/theme/provider/ThemeContextProvider';
+
 import { ThemeType } from '..';
 
 import './theme.css';
@@ -16,7 +18,11 @@ const ThemeProvider = ({ theme, children }: ThemeProviderProps) => {
       theme.name === 'dark' ? 'dark' : 'light';
   }, [theme]);
 
-  return <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>;
+  return (
+    <EmotionThemeProvider theme={theme}>
+      <ThemeContextProvider theme={theme}>{children}</ThemeContextProvider>
+    </EmotionThemeProvider>
+  );
 };
 
 export default ThemeProvider;