twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-01 08:06:49 +03:00
Code Issues Packages Projects Releases Wiki Activity

Enh/improve skeletton loading (#810)

Browse Source 
* Update skeleton styling

* Update skeleton color

* Remove useless color

* Add loading test case

* naming

* Improve test

* Fix colors

* Add import

* Lint

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
This commit is contained in:
Emilien Chauvet 2023-07-21 22:07:11 -07:00 committed by GitHub
parent 775b4c353d
commit 0f3f6fa948
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 45 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
front/.storybook/preview.ts
View File

@ -4,6 +4,7 @@ import { ThemeProvider } from '@emotion/react';
import { withThemeFromJSXProvider } from '@storybook/addon-styling';
import { lightTheme, darkTheme } from '../src/modules/ui/themes/themes';
import { RootDecorator } from '../src/testing/decorators';
import 'react-loading-skeleton/dist/skeleton.css';
import { mockedUserJWT } from '../src/testing/mock-data/jwt';
initialize();

14
front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx
View File

@ -6,6 +6,7 @@ import { IconPlus } from '@/ui/icon/index';
import { Avatar } from '@/users/components/Avatar';
import { ComponentDecorator } from '~/testing/decorators';
import { DropdownMenuSkeletonItem } from '../../../relation-picker/components/skeletons/DropdownMenuSkeletonItem';
import { DropdownMenu } from '../DropdownMenu';
import { DropdownMenuCheckableItem } from '../DropdownMenuCheckableItem';
import { DropdownMenuItem } from '../DropdownMenuItem';
@ -194,6 +195,19 @@ export const SimpleMenuItem: Story = {
),
};
export const LoadingMenu: Story = {
...WithContentBelow,
render: () => (
<DropdownMenu>
<DropdownMenuSearch value={'query'} autoFocus />
<DropdownMenuSeparator />
<DropdownMenuItemsContainer hasMaxHeight>
<DropdownMenuSkeletonItem />
</DropdownMenuItemsContainer>
</DropdownMenu>
),
};
export const Search: Story = {
...WithContentBelow,
render: (args) => (

7
front/src/modules/ui/relation-picker/components/SingleEntitySelectBase.tsx
View File

@ -1,5 +1,4 @@
import { useRef } from 'react';
import Skeleton from 'react-loading-skeleton';
import { Key } from 'ts-key-enum';
import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
@ -14,7 +13,7 @@ import { useEntitySelectScroll } from '../hooks/useEntitySelectScroll';
import { EntityForSelect } from '../types/EntityForSelect';
import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
import { DropdownMenuItemsContainerSkeleton } from './skeletons/DropdownMenuItemsContainerSkeleton';
import { DropdownMenuSkeletonItem } from './skeletons/DropdownMenuSkeletonItem';
export type EntitiesForSingleEntitySelect<
CustomEntityForSelect extends EntityForSelect,
@ -67,9 +66,7 @@ export function SingleEntitySelectBase<
return (
<DropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
{entities.loading ? (
<DropdownMenuItemsContainerSkeleton>
<Skeleton height={24} />
</DropdownMenuItemsContainerSkeleton>
<DropdownMenuSkeletonItem />
) : entitiesInDropdown.length === 0 ? (
<DropdownMenuItem>No result</DropdownMenuItem>
) : (

16
front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuItemsContainerSkeleton.tsx
View File

@ -1,16 +0,0 @@
import styled from '@emotion/styled';
export const DropdownMenuItemsContainerSkeleton = styled.div`
--horizontal-padding: ${({ theme }) => theme.spacing(1)};
--vertical-padding: ${({ theme }) => theme.spacing(1)};
align-items: center;
border-radius: ${({ theme }) => theme.border.radius.sm};
color: blue;
height: calc(100% - 2 * var(--vertical-padding));
padding: var(--vertical-padding) var(--horizontal-padding);
width: calc(100% - 2 * var(--horizontal-padding));
`;

28
front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx Normal file
View File

@ -0,0 +1,28 @@
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
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));
`;
export function DropdownMenuSkeletonItem() {
const theme = useTheme();
return (
<StyledDropdownMenuSkeletonContainer>
<SkeletonTheme
baseColor="transparent"
highlightColor={theme.background.tertiary}
>
<Skeleton height={16} />
</SkeletonTheme>
</StyledDropdownMenuSkeletonContainer>
);
}