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

accounts page loader as skeleton (#5702)

Browse Source 
fixes https://github.com/twentyhq/twenty/issues/5659



https://github.com/twentyhq/twenty/assets/19856731/aeae6f08-bc6e-4d71-9067-39b6382ebf15
This commit is contained in:
rostaklein
2024-06-03 15:14:08 +02:00
committed by GitHub
parent 24941c66b7
commit e49db63f30
2 changed files with 15 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountLoader.tsx
View File

@ -1,19 +1,15 @@
import { Loader } from '@/ui/feedback/loader/components/Loader'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder'; import { useTheme } from '@emotion/react';
import {
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
export const SettingsAccountLoader = () => ( export const SettingsAccountLoader = () => {
<AnimatedPlaceholderEmptyContainer> const theme = useTheme();
<AnimatedPlaceholder type="loadingAccounts" /> return (
<AnimatedPlaceholderEmptyTextContainer> <SkeletonTheme
<AnimatedPlaceholderEmptyTitle> baseColor={theme.background.tertiary}
Loading account(s) highlightColor={theme.background.transparent.lighter}
</AnimatedPlaceholderEmptyTitle> borderRadius={4}
<Loader /> >
</AnimatedPlaceholderEmptyTextContainer> <Skeleton height={20} width={512} />
</AnimatedPlaceholderEmptyContainer> </SkeletonTheme>
); );
};

8
packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
View File

@ -38,13 +38,7 @@ export const SettingsAccounts = () => {
return ( return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings"> <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer <SettingsPageContainer>
style={
loading
? { height: '100%', boxSizing: 'border-box', width: '100%' }
: {}
}
>
<Breadcrumb links={[{ children: 'Accounts' }]} /> <Breadcrumb links={[{ children: 'Accounts' }]} />
{loading ? ( {loading ? (