mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fixed record picker loading flickering (#12736)

Browse Source 
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>
This commit is contained in:
Lucas Bordeau
2025-06-24 12:15:50 +02:00
committed by GitHub
parent 9aaa104ec0
commit 3cee2b796f
26 changed files with 475 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
);