Fixed record picker loading flickering (#12736)

This PR solves a flickering effect on record pickers on the different
loading state they can be in.

It was designed with @Bonapara to settle on a nice UX feeling.

## Before

With fast network (local) :


https://github.com/user-attachments/assets/58899934-c705-4b44-b7f6-289045032c11

With slow network : 


https://github.com/user-attachments/assets/9fb18d86-9da6-4e5d-a83f-00c810fab2dc

## After


https://github.com/user-attachments/assets/f4abb40f-5d42-4c46-88ab-aaef4f883f7f

Fixes https://github.com/twentyhq/twenty/issues/12680

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx

@@ -1,4 +1,5 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+import { CSSWidth } from '@/ui/types/CSSWidth';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
@@ -6,15 +7,24 @@ import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 const StyledDropdownMenuSkeletonContainer = styled.div`
   --horizontal-padding: ${({ theme }) => theme.spacing(1)};
   --vertical-padding: ${({ theme }) => theme.spacing(2)};
-  align-items: center;
+
   border-radius: ${({ theme }) => theme.border.radius.sm};
   gap: ${({ theme }) => theme.spacing(2)};
-  height: calc(32px - 2 * var(--vertical-padding));
-  padding: var(--vertical-padding) var(--horizontal-padding);
-  width: calc(100% - 2 * var(--horizontal-padding));
+  box-sizing: border-box;
+
+  flex-shrink: 0;
+
+  padding-left: var(--horizontal-padding);
+  padding-right: var(--horizontal-padding);
+
+  height: ${({ theme }) => theme.spacing(8)};
 `;
 
-export const DropdownMenuSkeletonItem = () => {
+export const DropdownMenuSkeletonItem = ({
+  width = '100%',
+}: {
+  width?: CSSWidth;
+}) => {
   const theme = useTheme();
   return (
     <StyledDropdownMenuSkeletonContainer>
@@ -22,7 +32,11 @@ export const DropdownMenuSkeletonItem = () => {
         baseColor={theme.background.quaternary}
         highlightColor={theme.background.secondary}
       >
-        <Skeleton height={SKELETON_LOADER_HEIGHT_SIZES.standard.s} />
+        <Skeleton
+          height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
+          style={{ lineHeight: 0 }}
+          width={width}
+        />
       </SkeletonTheme>
     </StyledDropdownMenuSkeletonContainer>
   );

packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/Dropdown.stories.tsx

@@ -6,6 +6,7 @@ import { useState } from 'react';
 
 import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
 
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { ModalHotkeyScope } from '@/ui/layout/modal/components/types/ModalHotkeyScope';
@@ -84,7 +85,9 @@ const StyledEmptyDropdownContent = styled.div`
 export const Empty: Story = {
   args: {
     dropdownComponents: (
-      <StyledEmptyDropdownContent data-testid="dropdown-content" />
+      <DropdownContent>
+        <StyledEmptyDropdownContent data-testid="dropdown-content" />
+      </DropdownContent>
     ),
   },
   play: async () => {
@@ -155,26 +158,28 @@ const FakeSelectableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => {
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
 
   return (
-    <>
-      {optionsMock.map((item) => (
-        <MenuItemSelectAvatar
-          key={item.id}
-          selected={selectedItem === item.id}
-          onClick={() => setSelectedItem(item.id)}
-          avatar={
-            hasAvatar ? (
-              <Avatar
-                placeholder="A"
-                avatarUrl={item.avatarUrl}
-                size="md"
-                type="squared"
-              />
-            ) : undefined
-          }
-          text={item.name}
-        />
-      ))}
-    </>
+    <DropdownContent>
+      <DropdownMenuItemsContainer hasMaxHeight>
+        {optionsMock.map((item) => (
+          <MenuItemSelectAvatar
+            key={item.id}
+            selected={selectedItem === item.id}
+            onClick={() => setSelectedItem(item.id)}
+            avatar={
+              hasAvatar ? (
+                <Avatar
+                  placeholder="A"
+                  avatarUrl={item.avatarUrl}
+                  size="md"
+                  type="squared"
+                />
+              ) : undefined
+            }
+            text={item.name}
+          />
+        ))}
+      </DropdownMenuItemsContainer>
+    </DropdownContent>
   );
 };
 
@@ -184,31 +189,33 @@ const FakeCheckableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => {
   >({});
 
   return (
-    <>
-      {optionsMock.map((item) => (
-        <MenuItemMultiSelectAvatar
-          key={item.id}
-          selected={selectedItemsById[item.id]}
-          onSelectChange={(checked) =>
-            setSelectedItemsById((previous) => ({
-              ...previous,
-              [item.id]: checked,
-            }))
-          }
-          avatar={
-            hasAvatar ? (
-              <Avatar
-                placeholder="A"
-                avatarUrl={item.avatarUrl}
-                size="md"
-                type="squared"
-              />
-            ) : undefined
-          }
-          text={item.name}
-        />
-      ))}
-    </>
+    <DropdownContent>
+      <DropdownMenuItemsContainer hasMaxHeight>
+        {optionsMock.map((item) => (
+          <MenuItemMultiSelectAvatar
+            key={item.id}
+            selected={selectedItemsById[item.id]}
+            onSelectChange={(checked) =>
+              setSelectedItemsById((previous) => ({
+                ...previous,
+                [item.id]: checked,
+              }))
+            }
+            avatar={
+              hasAvatar ? (
+                <Avatar
+                  placeholder="A"
+                  avatarUrl={item.avatarUrl}
+                  size="md"
+                  type="squared"
+                />
+              ) : undefined
+            }
+            text={item.name}
+          />
+        ))}
+      </DropdownMenuItemsContainer>
+    </DropdownContent>
   );
 };
 
@@ -227,7 +234,7 @@ export const WithHeaders: Story = {
   decorators: [WithContentBelowDecorator],
   args: {
     dropdownComponents: (
-      <>
+      <DropdownContent>
         <DropdownMenuHeader
           StartComponent={
             <DropdownMenuHeaderLeftComponent Icon={IconChevronLeft} />
@@ -250,7 +257,7 @@ export const WithHeaders: Story = {
             <MenuItem key={item.id} text={item.name} />
           ))}
         </DropdownMenuItemsContainer>
-      </>
+      </DropdownContent>
     ),
   },
   play: playInteraction,
@@ -260,13 +267,13 @@ export const SearchWithLoadingMenu: Story = {
   decorators: [WithContentBelowDecorator],
   args: {
     dropdownComponents: (
-      <>
+      <DropdownContent>
         <DropdownMenuSearchInput value="query" autoFocus />
         <DropdownMenuSeparator />
         <DropdownMenuItemsContainer hasMaxHeight>
           <DropdownMenuSkeletonItem />
         </DropdownMenuItemsContainer>
-      </>
+      </DropdownContent>
     ),
   },
   play: async () => {
@@ -292,7 +299,7 @@ export const WithInput: Story = {
   decorators: [WithContentBelowDecorator],
   args: {
     dropdownComponents: (
-      <>
+      <DropdownContent>
         <DropdownMenuInput value="Lorem ipsum" autoFocus />
         <DropdownMenuSeparator />
         <DropdownMenuItemsContainer hasMaxHeight>
@@ -300,7 +307,7 @@ export const WithInput: Story = {
             <MenuItem key={name} text={name} />
           ))}
         </DropdownMenuItemsContainer>
-      </>
+      </DropdownContent>
     ),
   },
   play: playInteraction,
@@ -309,11 +316,7 @@ export const WithInput: Story = {
 export const SelectableMenuItemWithAvatar: Story = {
   decorators: [WithContentBelowDecorator],
   args: {
-    dropdownComponents: (
-      <DropdownMenuItemsContainer hasMaxHeight>
-        <FakeSelectableMenuItemList hasAvatar />
-      </DropdownMenuItemsContainer>
-    ),
+    dropdownComponents: <FakeSelectableMenuItemList hasAvatar />,
   },
   play: playInteraction,
 };
@@ -321,11 +324,7 @@ export const SelectableMenuItemWithAvatar: Story = {
 export const CheckableMenuItemWithAvatar: Story = {
   decorators: [WithContentBelowDecorator],
   args: {
-    dropdownComponents: (
-      <DropdownMenuItemsContainer hasMaxHeight>
-        <FakeCheckableMenuItemList hasAvatar />
-      </DropdownMenuItemsContainer>
-    ),
+    dropdownComponents: <FakeCheckableMenuItemList hasAvatar />,
   },
   play: playInteraction,
 };
@@ -354,11 +353,9 @@ const ModalWithDropdown = () => {
               dropdownId="modal-dropdown-test"
               isDropdownInModal={true}
               dropdownComponents={
-                <DropdownMenuItemsContainer hasMaxHeight>
-                  <div data-testid="dropdown-content">
-                    <FakeSelectableMenuItemList hasAvatar />
-                  </div>
-                </DropdownMenuItemsContainer>
+                <div data-testid="dropdown-content">
+                  <FakeSelectableMenuItemList hasAvatar />
+                </div>
               }
             />
           </div>

packages/twenty-front/src/modules/ui/types/CSSWidth.ts

@@ -0,0 +1 @@
+export type CSSWidth = `${number}%` | `${number}px`;