admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Prefetch Skeleton Loading on Indexes and Shows (#5545)

Browse Source 
### Description
Prefetch Skeleton Loading on Indexes and Shows

### Refs
#4458

### Demo

https://jam.dev/c/a1ad04e1-80b6-4b2a-b7df-373f52f4b169

https://jam.dev/c/c5038b97-2f18-4c29-8dee-18c09376e5ee

Fixes: #4458

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
2024-05-27 15:56:08 +08:00
committed by GitHub
parent cfd83d6b8e
commit 9c046dcfdb
60 changed files with 490 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
View File

@ -1,7 +1,9 @@
import { useLocation } from 'react-router-dom';
import { useIcons } from 'twenty-ui';
import { ObjectMetadataNavItemsSkeletonLoader } from '@/object-metadata/components/ObjectMetadataNavItemsSkeletonLoader';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
@ -14,6 +16,11 @@ export const ObjectMetadataNavItems = () => {
const currentPath = useLocation().pathname;
const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
const loading = useIsPrefetchLoading();
if (loading) {
return <ObjectMetadataNavItemsSkeletonLoader />;
}
return (
<>

28
packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItemsSkeletonLoader.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 StyledSkeletonColumn = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(1)};
height: 76px;
padding-left: ${({ theme }) => theme.spacing(1)};
`;
export const ObjectMetadataNavItemsSkeletonLoader: React.FC = () => {
const theme = useTheme();
return (
<SkeletonTheme
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.light}
borderRadius={4}
>
<StyledSkeletonColumn>
<Skeleton width={196} height={16} />
<Skeleton width={196} height={16} />
<Skeleton width={196} height={16} />
</StyledSkeletonColumn>
</SkeletonTheme>
);
};

2
packages/twenty-front/src/modules/object-metadata/components/__stories__/ObjectMetadataNavItems.stories.tsx
View File

@ -6,6 +6,7 @@ import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/Componen
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
@ -20,6 +21,7 @@ const meta: Meta<typeof ObjectMetadataNavItems> = {
ComponentWithRouterDecorator,
ComponentWithRecoilScopeDecorator,
SnackBarDecorator,
PrefetchLoadingDecorator,
],
parameters: {
msw: graphqlMocks,