Improve Relation Picker Loading Sequence

[Bonapara]

Current behavior

The Relation picker is loading in three distinct steps:

1. The skeleton loading appears alongside Add New

2. The Selected Company is displayed first

3. Other companies are displayed, and the Add new button disappears

Video:

https://github.com/twentyhq/twenty/assets/19412894/76cc6f13-d12b-4092-9795-b9ad1c986cac

Desired Behavior

We should display the "selected" company from the start when its available.

If the menu shows All "Records" or No "Records", the skeleton loading should be above the record name. Otherwise, it should be underneath.

The "Add New" button should not be displayed during loading. The loading process should have only two steps: the skeleton step and the fully loaded step.

Figma

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=33541-73636&t=swXsK3PuBiFkmrTW-11

[greptile-apps[bot]]

To improve the Relation Picker loading sequence:

1. Modify RelationPicker Component:

   • Path: relation-picker/RelationPicker.tsx
   • Ensure the Add New button is conditionally rendered based on the loading state.

     { !isLoading && <AddNewButton /> }

2. Update SingleEntitySelectMenuItemsWithSearch Component:

   • Path: relation-picker/SingleEntitySelectMenuItemsWithSearch.tsx
   • Adjust the rendering logic to display the selected company name from the start.

     { selectedCompany && <CompanyName>{selectedCompany.name}</CompanyName> }
     { isLoading ? <SkeletonLoader /> : <CompanyList companies={companies} /> }

3. Adjust useRelationPickerEntitiesOptions Hook:

   • Path: relation-picker/hooks/useRelationPickerEntitiesOptions.ts
   • Ensure the hook provides the selected company immediately if available.

     const { selectedCompany, companies, isLoading } = useRelationPickerEntitiesOptions();

4. Update useRelationPicker Hook:

   • Path: relation-picker/hooks/useRelationPicker.ts
   • Modify the loading state management to streamline the loading steps.

     const { isLoading, selectedCompany, companies } = useRelationPicker();

References