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

User & Metadata Loading (#5347)

Browse Source 
### Description
User & Metadata Loading

### Refs
#4456

### Demo


https://github.com/twentyhq/twenty/assets/140154534/4c20fca6-feaf-45f6-ac50-6532d2ebf050


Fixes #4456

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
2024-05-27 16:38:37 +08:00
committed by GitHub
parent 74d7479c8c
commit 10abd7f0ad
7 changed files with 249 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx Normal file
View File

@ -0,0 +1,92 @@
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import styled from '@emotion/styled';
import {
BACKGROUND_LIGHT,
BORDER_COMMON,
BORDER_LIGHT,
GRAY_SCALE,
MOBILE_VIEWPORT,
} from 'twenty-ui';
const StyledMainContainer = styled.div`
background: ${BACKGROUND_LIGHT.noisy};
box-sizing: border-box;
display: flex;
flex: 1 1 auto;
flex-direction: row;
gap: 8px;
min-height: 0;
padding-left: 0;
width: 100%;
@media (max-width: ${MOBILE_VIEWPORT}px) {
padding-left: 12px;
padding-bottom: 0;
}
`;
const StyledPanel = styled.div`
background: ${BACKGROUND_LIGHT.primary};
border: 1px solid ${BORDER_LIGHT.color.medium};
border-radius: ${BORDER_COMMON.radius.md};
height: 100%;
overflow: auto;
width: 100%;
`;
const StyledHeaderContainer = styled.div`
flex: 1;
`;
const StyledRightPanelContainer = styled.div`
display: flex;
flex-direction: column;
width: 100%;
`;
const StyledRightPanelFlexContainer = styled.div`
display: flex;
margin-top: 12px;
margin-bottom: 14px;
`;
const StyledSkeletonHeaderLoader = () => {
return (
<StyledHeaderContainer>
<SkeletonTheme
baseColor={GRAY_SCALE.gray15}
highlightColor={BACKGROUND_LIGHT.transparent.lighter}
borderRadius={4}
>
<Skeleton height={16} width={104} />
</SkeletonTheme>
</StyledHeaderContainer>
);
};
const StyledSkeletonAddLoader = () => {
return (
<SkeletonTheme
baseColor={GRAY_SCALE.gray15}
highlightColor={BACKGROUND_LIGHT.transparent.lighter}
borderRadius={4}
>
<Skeleton width={132} height={16} />
</SkeletonTheme>
);
};
const RightPanelSkeleton = () => (
<StyledMainContainer>
<StyledPanel></StyledPanel>
</StyledMainContainer>
);
export const RightPanelSkeletonLoader = () => (
<StyledRightPanelContainer>
<StyledRightPanelFlexContainer>
<StyledSkeletonHeaderLoader />
<StyledSkeletonAddLoader />
</StyledRightPanelFlexContainer>
<RightPanelSkeleton />
</StyledRightPanelContainer>
);