Refactored all FieldDisplay types for performance optimization (#5768)

This PR is the second part of
#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 |

package.json

@@ -131,6 +131,7 @@
     "lodash.upperfirst": "^4.3.1",
     "luxon": "^3.3.0",
     "microdiff": "^1.3.2",
+    "moize": "^6.1.6",
     "nest-commander": "^3.12.0",
     "next": "14.0.4",
     "next-mdx-remote": "^4.4.1",

packages/twenty-front/.storybook/preview.tsx

@@ -3,7 +3,7 @@ import { ThemeProvider } from '@emotion/react';
 import { Preview } from '@storybook/react';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
 import { useDarkMode } from 'storybook-dark-mode';
-import { THEME_DARK, THEME_LIGHT } from 'twenty-ui';
+import { THEME_DARK, THEME_LIGHT, ThemeContextProvider } from 'twenty-ui';
 
 import { RootDecorator } from '../src/testing/decorators/RootDecorator';
 import { mockedUserJWT } from '../src/testing/mock-data/jwt';
@@ -39,7 +39,9 @@ const preview: Preview = {
 
       return (
         <ThemeProvider theme={theme}>
-          <Story />
+          <ThemeContextProvider theme={theme}>
+            <Story />
+          </ThemeContextProvider>
         </ThemeProvider>
       );
     },

packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx

@@ -9,7 +9,7 @@ import { emailThreadIdWhenEmailThreadWasClosedState } from '@/activities/emails/
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { MessageChannelVisibility, TimelineThread } from '~/generated/graphql';
-import { formatToHumanReadableDate } from '~/utils';
+import { formatToHumanReadableDate } from '~/utils/date-utils';
 import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
 
 const StyledCardContent = styled(CardContent)<{

packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx

@@ -14,7 +14,7 @@ import {
   GenericFieldContextType,
 } from '@/object-record/record-field/contexts/FieldContext';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
-import { formatToHumanReadableDate } from '~/utils';
+import { formatToHumanReadableDate } from '~/utils/date-utils';
 
 const StyledRow = styled.div`
   align-items: center;

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx

@@ -13,6 +13,8 @@ import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWith
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getCompaniesMock } from '~/testing/mock-data/companies';
+import { getPeopleMock } from '~/testing/mock-data/people';
 import {
   mockDefaultWorkspace,
   mockedWorkspaceMemberData,
@@ -21,6 +23,9 @@ import { sleep } from '~/testing/sleep';
 
 import { CommandMenu } from '../CommandMenu';
 
+const peopleMock = getPeopleMock();
+const companiesMock = getCompaniesMock();
+
 const openTimeout = 50;
 
 const meta: Meta<typeof CommandMenu> = {
@@ -94,8 +99,12 @@ export const MatchingPersonCompanyActivityCreateNavigate: Story = {
     const searchInput = await canvas.findByPlaceholderText('Search');
     await sleep(openTimeout);
     await userEvent.type(searchInput, 'n');
-    expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
-    expect(await canvas.findByText('Airbnb')).toBeInTheDocument();
+    expect(
+      await canvas.findByText(
+        peopleMock[0].name.firstName + ' ' + peopleMock[0].name.lastName,
+      ),
+    ).toBeInTheDocument();
+    expect(await canvas.findByText(companiesMock[0].name)).toBeInTheDocument();
     expect(await canvas.findByText('My very first note')).toBeInTheDocument();
     expect(await canvas.findByText('Create Note')).toBeInTheDocument();
     expect(await canvas.findByText('Go to Companies')).toBeInTheDocument();
@@ -119,7 +128,11 @@ export const AtleastMatchingOnePerson: Story = {
     const searchInput = await canvas.findByPlaceholderText('Search');
     await sleep(openTimeout);
     await userEvent.type(searchInput, 'alex');
-    expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
+    expect(
+      await canvas.findByText(
+        peopleMock[0].name.firstName + ' ' + peopleMock[0].name.lastName,
+      ),
+    ).toBeInTheDocument();
   },
 };
 

packages/twenty-front/src/modules/object-record/cache/utils/__tests__/getRecordNodeFromRecord.test.ts

@@ -3,10 +3,12 @@ import {
   mockedObjectMetadataItems,
   mockedPersonObjectMetadataItem,
 } from '~/testing/mock-data/metadata';
-import { mockedPeopleData } from '~/testing/mock-data/people';
+import { getPeopleMock } from '~/testing/mock-data/people';
 
 import { getRecordNodeFromRecord } from '../getRecordNodeFromRecord';
 
+const peopleMock = getPeopleMock();
+
 describe('getRecordNodeFromRecord', () => {
   it('computes relation records cache references by default', () => {
     // Given
@@ -19,7 +21,7 @@ describe('getRecordNodeFromRecord', () => {
       name: true,
       company: true,
     };
-    const record = mockedPeopleData[0];
+    const record = peopleMock[0];
 
     // When
     const result = getRecordNodeFromRecord({
@@ -33,12 +35,12 @@ describe('getRecordNodeFromRecord', () => {
     expect(result).toEqual({
       __typename: 'Person',
       company: {
-        __ref: 'Company:5c21e19e-e049-4393-8c09-3e3f8fb09ecb',
+        __ref: `Company:${record.company.id}`,
       },
       name: {
         __typename: 'FullName',
-        firstName: 'Alexandre',
-        lastName: 'Prot',
+        firstName: record.name.firstName,
+        lastName: record.name.lastName,
       },
     });
   });
@@ -54,7 +56,7 @@ describe('getRecordNodeFromRecord', () => {
       name: true,
       company: true,
     };
-    const record = mockedPeopleData[0];
+    const record = peopleMock[0];
     const computeReferences = false;
 
     // When
@@ -72,8 +74,8 @@ describe('getRecordNodeFromRecord', () => {
       company: record.company,
       name: {
         __typename: 'FullName',
-        firstName: 'Alexandre',
-        lastName: 'Prot',
+        firstName: record.name.firstName,
+        lastName: record.name.lastName,
       },
     });
   });

packages/twenty-front/src/modules/object-record/hooks/__mocks__/useFindDuplicateRecords.ts

@@ -1,5 +1,7 @@
 import { gql } from '@apollo/client';
-import { mockedPeopleData } from '~/testing/mock-data/people';
+import { getPeopleMock } from '~/testing/mock-data/people';
+
+const peopleMock = getPeopleMock();
 
 export const query = gql`
   query FindDuplicatePerson($id: ID!) {
@@ -49,11 +51,11 @@ export const responseData = {
   personDuplicates: {
     edges: [
       {
-        node: {  ...mockedPeopleData[0], updatedAt: '' },
+        node: {  ...peopleMock[0], updatedAt: '' },
         cursor: 'cursor1',
       },
       {
-        node: { ...mockedPeopleData[1], updatedAt: '' },
+        node: { ...peopleMock[1], updatedAt: '' },
         cursor: 'cursor2',
       },
     ],

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/AddressFieldDisplay.tsx

@@ -1,16 +1,18 @@
-import { useAddressField } from '@/object-record/record-field/meta-types/hooks/useAddressField';
+import { isNonEmptyString } from '@sniptt/guards';
+
+import { useAddressFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useAddressFieldDisplay';
 import { TextDisplay } from '@/ui/field/display/components/TextDisplay';
 
 export const AddressFieldDisplay = () => {
-  const { fieldValue } = useAddressField();
+  const { fieldValue } = useAddressFieldDisplay();
 
   const content = [
     fieldValue?.addressStreet1,
     fieldValue?.addressStreet2,
     fieldValue?.addressCity,
     fieldValue?.addressCountry,
   ]
-    .filter(Boolean)
+    .filter(isNonEmptyString)
     .join(', ');
 
   return <TextDisplay text={content} />;

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/BooleanFieldDisplay.tsx

@@ -1,8 +1,8 @@
-import { useBooleanField } from '@/object-record/record-field/meta-types/hooks/useBooleanField';
+import { useBooleanFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useBooleanFieldDisplay';
 import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay';
 
 export const BooleanFieldDisplay = () => {
-  const { fieldValue } = useBooleanField();
+  const { fieldValue } = useBooleanFieldDisplay();
 
   return <BooleanDisplay value={fieldValue} />;
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/CurrencyFieldDisplay.tsx

@@ -1,9 +1,8 @@
+import { useCurrencyFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useCurrencyFieldDisplay';
 import { CurrencyDisplay } from '@/ui/field/display/components/CurrencyDisplay';
 
-import { useCurrencyField } from '../../hooks/useCurrencyField';
-
 export const CurrencyFieldDisplay = () => {
-  const { fieldValue } = useCurrencyField();
+  const { fieldValue } = useCurrencyFieldDisplay();
 
   return <CurrencyDisplay currencyValue={fieldValue} />;
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/DateFieldDisplay.tsx

@@ -1,9 +1,8 @@
+import { useDateFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useDateFieldDisplay';
 import { DateDisplay } from '@/ui/field/display/components/DateDisplay';
 
-import { useDateField } from '../../hooks/useDateField';
-
 export const DateFieldDisplay = () => {
-  const { fieldValue } = useDateField();
+  const { fieldValue } = useDateFieldDisplay();
 
   return <DateDisplay value={fieldValue} />;
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/DateTimeFieldDisplay.tsx

@@ -1,9 +1,8 @@
+import { useDateTimeFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useDateTimeFieldDisplay';
 import { DateTimeDisplay } from '@/ui/field/display/components/DateTimeDisplay';
 
-import { useDateTimeField } from '../../hooks/useDateTimeField';
-
 export const DateTimeFieldDisplay = () => {
-  const { fieldValue } = useDateTimeField();
+  const { fieldValue } = useDateTimeFieldDisplay();
 
   return <DateTimeDisplay value={fieldValue} />;
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/EmailFieldDisplay.tsx

@@ -1,9 +1,8 @@
+import { useEmailFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useEmailFieldDisplay';
 import { EmailDisplay } from '@/ui/field/display/components/EmailDisplay';
 
-import { useEmailField } from '../../hooks/useEmailField';
-
 export const EmailFieldDisplay = () => {
-  const { fieldValue } = useEmailField();
+  const { fieldValue } = useEmailFieldDisplay();
 
   return <EmailDisplay value={fieldValue} />;
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/FullNameFieldDisplay.tsx

@@ -1,11 +1,13 @@
-import { useFullNameField } from '@/object-record/record-field/meta-types/hooks/useFullNameField';
+import { isNonEmptyString } from '@sniptt/guards';
+
+import { useFullNameFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useFullNameFieldDisplay';
 import { TextDisplay } from '@/ui/field/display/components/TextDisplay';
 
 export const FullNameFieldDisplay = () => {
-  const { fieldValue } = useFullNameField();
+  const { fieldValue } = useFullNameFieldDisplay();
 
-  const content = [fieldValue.firstName, fieldValue.lastName]
-    .filter(Boolean)
+  const content = [fieldValue?.firstName, fieldValue?.lastName]
+    .filter(isNonEmptyString)
     .join(' ');
 
   return <TextDisplay text={content} />;

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/JsonFieldDisplay.tsx

@@ -1,19 +1,15 @@
-import { useJsonField } from '@/object-record/record-field/meta-types/hooks/useJsonField';
-import { isFieldRawJsonValue } from '@/object-record/record-field/types/guards/isFieldRawJsonValue';
+import { useJsonFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useJsonFieldDisplay';
 import { JsonDisplay } from '@/ui/field/display/components/JsonDisplay';
 import { isDefined } from '~/utils/isDefined';
 
 export const JsonFieldDisplay = () => {
-  const { fieldValue, maxWidth } = useJsonField();
+  const { fieldValue, maxWidth } = useJsonFieldDisplay();
 
-  return (
-    <JsonDisplay
-      text={
-        isFieldRawJsonValue(fieldValue) && isDefined(fieldValue)
-          ? JSON.stringify(fieldValue)
-          : ''
-      }
-      maxWidth={maxWidth}
-    />
-  );
+  if (!isDefined(fieldValue)) {
+    return <></>;
+  }
+
+  const value = JSON.stringify(fieldValue);
+
+  return <JsonDisplay text={value} maxWidth={maxWidth} />;
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/LinkFieldDisplay.tsx

@@ -1,9 +1,8 @@
+import { useLinkFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useLinkFieldDisplay';
 import { LinkDisplay } from '@/ui/field/display/components/LinkDisplay';
 
-import { useLinkField } from '../../hooks/useLinkField';
-
 export const LinkFieldDisplay = () => {
-  const { fieldValue } = useLinkField();
+  const { fieldValue } = useLinkFieldDisplay();
 
   return <LinkDisplay value={fieldValue} />;
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/LinksFieldDisplay.tsx

@@ -1,9 +1,9 @@
 import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
-import { useLinksField } from '@/object-record/record-field/meta-types/hooks/useLinksField';
+import { useLinksFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useLinksFieldDisplay';
 import { LinksDisplay } from '@/ui/field/display/components/LinksDisplay';
 
 export const LinksFieldDisplay = () => {
-  const { fieldValue } = useLinksField();
+  const { fieldValue } = useLinksFieldDisplay();
 
   const { isFocused } = useFieldFocus();
 

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx

@@ -1,23 +1,39 @@
-import { Tag } from 'twenty-ui';
+import { styled } from '@linaria/react';
+import { Tag, THEME_COMMON } from 'twenty-ui';
 
 import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
-import { useMultiSelectField } from '@/object-record/record-field/meta-types/hooks/useMultiSelectField';
+import { useMultiSelectFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useMultiSelectFieldDisplay';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
 
+const spacing1 = THEME_COMMON.spacing(1);
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${spacing1};
+  justify-content: flex-start;
+
+  max-width: 100%;
+
+  overflow: hidden;
+
+  width: 100%;
+`;
+
 export const MultiSelectFieldDisplay = () => {
-  const { fieldValues, fieldDefinition } = useMultiSelectField();
+  const { fieldValue, fieldDefinition } = useMultiSelectFieldDisplay();
 
   const { isFocused } = useFieldFocus();
 
-  const selectedOptions = fieldValues
+  const selectedOptions = fieldValue
     ? fieldDefinition.metadata.options?.filter((option) =>
-        fieldValues.includes(option.value),
+        fieldValue.includes(option.value),
       )
     : [];
 
   if (!selectedOptions) return null;
 
-  return (
+  return isFocused ? (
     <ExpandableList isChipCountDisplayed={isFocused}>
       {selectedOptions.map((selectedOption, index) => (
         <Tag
@@ -27,5 +43,16 @@ export const MultiSelectFieldDisplay = () => {
         />
       ))}
     </ExpandableList>
+  ) : (
+    <StyledContainer>
+      {selectedOptions.map((selectedOption, index) => (
+        <Tag
+          preventShrink
+          key={index}
+          color={selectedOption.color}
+          text={selectedOption.label}
+        />
+      ))}
+    </StyledContainer>
   );
 };