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/modules/ui/field/display/components/LinksDisplay.tsx

@@ -1,4 +1,6 @@
-import { MouseEventHandler, useMemo } from 'react';
+import { useMemo } from 'react';
+import { styled } from '@linaria/react';
+import { THEME_COMMON } from 'twenty-ui';
 
 import { FieldLinksValue } from '@/object-record/record-field/types/FieldMetadata';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
@@ -17,6 +19,21 @@ type LinksDisplayProps = {
   isFocused?: boolean;
 };
 
+const themeSpacing = THEME_COMMON.spacingMultiplicator;
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${themeSpacing * 1}px;
+  justify-content: flex-start;
+
+  max-width: 100%;
+
+  overflow: hidden;
+
+  width: 100%;
+`;
+
 export const LinksDisplay = ({ value, isFocused }: LinksDisplayProps) => {
   const links = useMemo(
     () =>
@@ -41,21 +58,25 @@ export const LinksDisplay = ({ value, isFocused }: LinksDisplayProps) => {
     [value?.primaryLinkLabel, value?.primaryLinkUrl, value?.secondaryLinks],
   );
 
-  const handleClick: MouseEventHandler = (event) => event.stopPropagation();
-
-  return (
+  return isFocused ? (
     <ExpandableList isChipCountDisplayed={isFocused}>
       {links.map(({ url, label, type }, index) =>
         type === LinkType.LinkedIn || type === LinkType.Twitter ? (
-          <SocialLink key={index} href={url} onClick={handleClick} type={type}>
-            {label}
-          </SocialLink>
+          <SocialLink key={index} href={url} type={type} label={label} />
         ) : (
-          <RoundedLink key={index} href={url} onClick={handleClick}>
-            {label}
-          </RoundedLink>
+          <RoundedLink key={index} href={url} label={label} />
         ),
       )}
     </ExpandableList>
+  ) : (
+    <StyledContainer>
+      {links.map(({ url, label, type }, index) =>
+        type === LinkType.LinkedIn || type === LinkType.Twitter ? (
+          <SocialLink key={index} href={url} type={type} label={label} />
+        ) : (
+          <RoundedLink key={index} href={url} label={label} />
+        ),
+      )}
+    </StyledContainer>
   );
 };