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 #12680

---------

Co-authored-by: Charles Bochet <[email protected]>

Author: lucasbordeau

packages/twenty-front/src/modules/activities/inline-cell/hooks/useOpenActivityTargetCellEditMode.ts

@@ -1,6 +1,7 @@
 import { ActivityTargetWithTargetRecord } from '@/activities/types/ActivityTargetObject';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useMultipleRecordPickerOpen } from '@/object-record/record-picker/multiple-record-picker/hooks/useMultipleRecordPickerOpen';
 import { useMultipleRecordPickerPerformSearch } from '@/object-record/record-picker/multiple-record-picker/hooks/useMultipleRecordPickerPerformSearch';
 import { multipleRecordPickerPickableMorphItemsComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerPickableMorphItemsComponentState';
 import { multipleRecordPickerSearchFilterComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerSearchFilterComponentState';
@@ -19,6 +20,7 @@ type OpenActivityTargetCellEditModeProps = {
 export const useOpenActivityTargetCellEditMode = () => {
   const { performSearch: multipleRecordPickerPerformSearch } =
     useMultipleRecordPickerPerformSearch();
+  const { openMultipleRecordPicker } = useMultipleRecordPickerOpen();
 
   const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
 
@@ -70,6 +72,8 @@ export const useOpenActivityTargetCellEditMode = () => {
           '',
         );
 
+        openMultipleRecordPicker(recordPickerInstanceId);
+
         multipleRecordPickerPerformSearch({
           multipleRecordPickerInstanceId: recordPickerInstanceId,
           forceSearchFilter: '',
@@ -97,7 +101,11 @@ export const useOpenActivityTargetCellEditMode = () => {
           memoizeKey: recordPickerInstanceId,
         });
       },
-    [multipleRecordPickerPerformSearch, pushFocusItemToFocusStack],
+    [
+      multipleRecordPickerPerformSearch,
+      openMultipleRecordPicker,
+      pushFocusItemToFocusStack,
+    ],
   );
 
   return { openActivityTargetCellEditMode };

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useOpenRelationFromManyFieldInput.tsx

@@ -4,6 +4,7 @@ import {
   FieldRelationFromManyValue,
   FieldRelationValue,
 } from '@/object-record/record-field/types/FieldMetadata';
+import { useMultipleRecordPickerOpen } from '@/object-record/record-picker/multiple-record-picker/hooks/useMultipleRecordPickerOpen';
 import { useMultipleRecordPickerPerformSearch } from '@/object-record/record-picker/multiple-record-picker/hooks/useMultipleRecordPickerPerformSearch';
 import { multipleRecordPickerPickableMorphItemsComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerPickableMorphItemsComponentState';
 import { multipleRecordPickerSearchableObjectMetadataItemsComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerSearchableObjectMetadataItemsComponentState';
@@ -17,6 +18,7 @@ import { useRecoilCallback } from 'recoil';
 
 export const useOpenRelationFromManyFieldInput = () => {
   const { performSearch } = useMultipleRecordPickerPerformSearch();
+  const { openMultipleRecordPicker } = useMultipleRecordPickerOpen();
 
   const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
 
@@ -58,6 +60,8 @@ export const useOpenRelationFromManyFieldInput = () => {
           return;
         }
 
+        openMultipleRecordPicker(recordPickerInstanceId);
+
         const pickableMorphItems: RecordPickerPickableMorphItem[] =
           fieldValue.map((record) => {
             return {
@@ -105,7 +109,7 @@ export const useOpenRelationFromManyFieldInput = () => {
           memoizeKey: recordPickerInstanceId,
         });
       },
-    [performSearch, pushFocusItemToFocusStack],
+    [openMultipleRecordPicker, performSearch, pushFocusItemToFocusStack],
   );
 
   return { openRelationFromManyFieldInput };

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useOpenRelationToOneFieldInput.tsx

@@ -3,6 +3,7 @@ import {
   FieldRelationToOneValue,
   FieldRelationValue,
 } from '@/object-record/record-field/types/FieldMetadata';
+import { useSingleRecordPickerOpen } from '@/object-record/record-picker/single-record-picker/hooks/useSingleRecordPickerOpen';
 import { singleRecordPickerSelectedIdComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerSelectedIdComponentState';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
@@ -13,6 +14,7 @@ import { isDefined } from 'twenty-shared/utils';
 
 export const useOpenRelationToOneFieldInput = () => {
   const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+  const { openSingleRecordPicker } = useSingleRecordPickerOpen();
 
   const openRelationToOneFieldInput = useRecoilCallback(
     ({ set, snapshot }) =>
@@ -39,6 +41,8 @@ export const useOpenRelationToOneFieldInput = () => {
           );
         }
 
+        openSingleRecordPicker(recordPickerInstanceId);
+
         pushFocusItemToFocusStack({
           focusId: recordPickerInstanceId,
           component: {
@@ -50,7 +54,7 @@ export const useOpenRelationToOneFieldInput = () => {
           memoizeKey: recordPickerInstanceId,
         });
       },
-    [pushFocusItemToFocusStack],
+    [openSingleRecordPicker, pushFocusItemToFocusStack],
   );
 
   return { openRelationToOneFieldInput };

packages/twenty-front/src/modules/object-record/record-picker/components/RecordPickerInitialLoadingEmptyContainer.tsx

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+const StyledRecordPickerInitialLoadingEmptyContainer = styled.div`
+  height: 320px;
+  width: 100%;
+`;
+
+export { StyledRecordPickerInitialLoadingEmptyContainer as RecordPickerInitialLoadingEmptyContainer };

packages/twenty-front/src/modules/object-record/record-picker/components/RecordPickerLoadingSkeletonList.tsx

@@ -0,0 +1,13 @@
+import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
+
+export const RecordPickerLoadingSkeletonList = () => {
+  return (
+    <>
+      <DropdownMenuSkeletonItem width="53%" />
+      <DropdownMenuSkeletonItem width="35%" />
+      <DropdownMenuSkeletonItem width="48%" />
+      <DropdownMenuSkeletonItem width="67%" />
+      <DropdownMenuSkeletonItem width="75%" />
+    </>
+  );
+};

packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker.tsx

@@ -12,23 +12,16 @@ import { CreateNewButton } from '@/ui/input/relation-picker/components/CreateNew
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
-import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
-import styled from '@emotion/styled';
 import { useRef } from 'react';
 import { useRecoilCallback } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { isDefined } from 'twenty-shared/utils';
 import { IconPlus } from 'twenty-ui/display';
 
-export const StyledSelectableItem = styled(SelectableListItem)`
-  height: 100%;
-  width: 100%;
-`;
-
 type MultipleRecordPickerProps = {
   onChange?: (morphItem: RecordPickerPickableMorphItem) => void;
   onSubmit?: () => void;

packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerFetchMoreLoader.tsx

@@ -1,10 +1,16 @@
 import { useMultipleRecordPickerPerformSearch } from '@/object-record/record-picker/multiple-record-picker/hooks/useMultipleRecordPickerPerformSearch';
 import { MultipleRecordPickerComponentInstanceContext } from '@/object-record/record-picker/multiple-record-picker/states/contexts/MultipleRecordPickerComponentInstanceContext';
+
+import { multipleRecordPickerIsFetchingMoreComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerIsFetchingMoreComponentState';
 import { multipleRecordPickerIsLoadingComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerIsLoadingComponentState';
+
 import { multipleRecordPickerPaginationState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerPaginationState';
 import { multipleRecordPickerSearchFilterComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerSearchFilterComponentState';
+import { multipleRecordPickerShouldShowInitialLoadingComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerShouldShowInitialLoadingComponentState';
+import { multipleRecordPickerShouldShowSkeletonComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerShouldShowSkeletonComponentState';
 import { multipleRecordPickerPaginationSelector } from '@/object-record/record-picker/multiple-record-picker/states/selectors/multipleRecordPickerPaginationSelector';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
 import { useCallback } from 'react';
@@ -23,10 +29,17 @@ const StyledText = styled.div`
 `;
 
 const StyledIntersectionObserver = styled.div`
-  height: 1px;
+  height: 0px;
 `;
 
 export const MultipleRecordPickerFetchMoreLoader = () => {
+  const [
+    multipleRecordPickerIsFetchingMore,
+    setMultipleRecordPickerIsFetchingMore,
+  ] = useRecoilComponentStateV2(
+    multipleRecordPickerIsFetchingMoreComponentState,
+  );
+
   const componentInstanceId = useAvailableComponentInstanceIdOrThrow(
     MultipleRecordPickerComponentInstanceContext,
   );
@@ -46,6 +59,15 @@ export const MultipleRecordPickerFetchMoreLoader = () => {
     componentInstanceId,
   );
 
+  const multipleRecordPickerShouldShowInitialLoading =
+    useRecoilComponentValueV2(
+      multipleRecordPickerShouldShowInitialLoadingComponentState,
+    );
+
+  const multipleRecordPickerShouldShowSkeleton = useRecoilComponentValueV2(
+    multipleRecordPickerShouldShowSkeletonComponentState,
+  );
+
   const { performSearch } = useMultipleRecordPickerPerformSearch();
 
   const fetchMore = useRecoilCallback(
@@ -63,7 +85,7 @@ export const MultipleRecordPickerFetchMoreLoader = () => {
           return;
         }
 
-        performSearch({
+        await performSearch({
           multipleRecordPickerInstanceId: componentInstanceId,
           forceSearchFilter: searchFilter,
           loadMore: true,
@@ -74,23 +96,34 @@ export const MultipleRecordPickerFetchMoreLoader = () => {
 
   const { ref } = useInView({
     onChange: useCallback(
-      (inView: boolean) => {
+      async (inView: boolean) => {
         if (inView) {
-          fetchMore();
+          setMultipleRecordPickerIsFetchingMore(true);
+
+          await fetchMore();
+
+          setMultipleRecordPickerIsFetchingMore(false);
         }
       },
-      [fetchMore],
+      [fetchMore, setMultipleRecordPickerIsFetchingMore],
     ),
   });
 
-  if (!paginationState.hasNextPage) {
+  if (
+    !paginationState.hasNextPage ||
+    multipleRecordPickerShouldShowInitialLoading ||
+    multipleRecordPickerShouldShowSkeleton ||
+    (isLoading && !multipleRecordPickerIsFetchingMore)
+  ) {
     return null;
   }
 
   return (
-    <div>
+    <>
       <StyledIntersectionObserver ref={ref} />
-      {isLoading && <StyledText>Loading more...</StyledText>}
-    </div>
+      {multipleRecordPickerIsFetchingMore && (
+        <StyledText>Loading more...</StyledText>
+      )}
+    </>
   );
 };

packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerItemsDisplay.tsx

@@ -1,12 +1,7 @@
+import { MultipleRecordPickerLoadingEffect } from '@/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerLoadingEffect';
 import { MultipleRecordPickerMenuItems } from '@/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerMenuItems';
-import { MultipleRecordPickerComponentInstanceContext } from '@/object-record/record-picker/multiple-record-picker/states/contexts/MultipleRecordPickerComponentInstanceContext';
-import { multipleRecordPickerIsLoadingComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerIsLoadingComponentState';
-import { multipleRecordPickerPickableMorphItemsLengthComponentSelector } from '@/object-record/record-picker/multiple-record-picker/states/selectors/multipleRecordPickerPickableMorphItemsLengthComponentSelector';
 import { RecordPickerPickableMorphItem } from '@/object-record/record-picker/types/RecordPickerPickableMorphItem';
-import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 export const MultipleRecordPickerItemsDisplay = ({
   onChange,
@@ -15,28 +10,11 @@ export const MultipleRecordPickerItemsDisplay = ({
   onChange?: (morphItem: RecordPickerPickableMorphItem) => void;
   focusId: string;
 }) => {
-  const componentInstanceId = useAvailableComponentInstanceIdOrThrow(
-    MultipleRecordPickerComponentInstanceContext,
-  );
-
-  const isLoading = useRecoilComponentValueV2(
-    multipleRecordPickerIsLoadingComponentState,
-    componentInstanceId,
-  );
-
-  const itemsLength = useRecoilComponentValueV2(
-    multipleRecordPickerPickableMorphItemsLengthComponentSelector,
-    componentInstanceId,
-  );
-
   return (
     <>
+      <MultipleRecordPickerLoadingEffect />
       <DropdownMenuSeparator />
-      {isLoading && itemsLength === 0 ? (
-        <DropdownMenuSkeletonItem />
-      ) : (
-        <MultipleRecordPickerMenuItems onChange={onChange} focusId={focusId} />
-      )}
+      <MultipleRecordPickerMenuItems onChange={onChange} focusId={focusId} />
       <DropdownMenuSeparator />
     </>
   );

packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerLoadingEffect.tsx

@@ -0,0 +1,52 @@
+import { multipleRecordPickerIsFetchingMoreComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerIsFetchingMoreComponentState';
+import { multipleRecordPickerIsLoadingComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerIsLoadingComponentState';
+import { multipleRecordPickerShouldShowSkeletonComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerShouldShowSkeletonComponentState';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useEffect, useState } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+
+export const MultipleRecordPickerLoadingEffect = () => {
+  const [previousLoading, setPreviousLoading] = useState(false);
+
+  const loading = useRecoilComponentValueV2(
+    multipleRecordPickerIsLoadingComponentState,
+  );
+
+  const setMultipleRecordPickerShowSkeleton = useSetRecoilComponentStateV2(
+    multipleRecordPickerShouldShowSkeletonComponentState,
+  );
+
+  const [multipleRecordPickerIsFetchingMore] = useRecoilComponentStateV2(
+    multipleRecordPickerIsFetchingMoreComponentState,
+  );
+
+  const debouncedShowPickerSearchSkeleton = useDebouncedCallback(
+    () => setMultipleRecordPickerShowSkeleton(true),
+    350,
+  );
+
+  useEffect(() => {
+    if (previousLoading !== loading) {
+      setPreviousLoading(loading);
+
+      if (loading) {
+        if (!multipleRecordPickerIsFetchingMore) {
+          debouncedShowPickerSearchSkeleton();
+        }
+      } else {
+        debouncedShowPickerSearchSkeleton.cancel();
+        setMultipleRecordPickerShowSkeleton(false);
+      }
+    }
+  }, [
+    loading,
+    previousLoading,
+    setMultipleRecordPickerShowSkeleton,
+    multipleRecordPickerIsFetchingMore,
+    debouncedShowPickerSearchSkeleton,
+  ]);
+
+  return null;
+};