9618639744
@Bonapara Issue #6375 This change makes sure the container height is 32px instead of 28px. should the container inside it should also be 32px, please refer video below for context https://github.com/user-attachments/assets/fe97f0de-e1fd-4fda-a9a7-e9585469c530 Also skeleton height is 20px (refer video below), the black component in the video is the skeleton for this particular component. What should be skeletons height? https://github.com/user-attachments/assets/0956c8d9-8e4e-4c20-bb71-7fb1e2cba4fd --------- Co-authored-by: Charles Bochet <charles@twenty.com>
37 lines
896 B
TypeScript
37 lines
896 B
TypeScript
import styled from '@emotion/styled';
|
|
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
|
|
import { BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui';
|
|
|
|
const StyledSkeletonContainer = styled.div`
|
|
align-items: flex-start;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
min-width: 196px;
|
|
max-width: 196px;
|
|
`;
|
|
|
|
export const MainNavigationDrawerItemsSkeletonLoader = ({
|
|
title,
|
|
length,
|
|
}: {
|
|
title?: boolean;
|
|
length: number;
|
|
}) => {
|
|
return (
|
|
<StyledSkeletonContainer>
|
|
<SkeletonTheme
|
|
baseColor={GRAY_SCALE.gray15}
|
|
highlightColor={BACKGROUND_LIGHT.transparent.lighter}
|
|
borderRadius={4}
|
|
>
|
|
{title && <Skeleton width={48} height={13} />}
|
|
{Array.from({ length }).map((_, index) => (
|
|
<Skeleton key={index} width={196} height={16} />
|
|
))}
|
|
</SkeletonTheme>
|
|
</StyledSkeletonContainer>
|
|
);
|
|
};
|