User & Metadata Loading (#5347)

### 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

View File

@ -0,0 +1,32 @@
import styled from '@emotion/styled';
import { BACKGROUND_LIGHT, MOBILE_VIEWPORT } from 'twenty-ui';
import { DESKTOP_NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths';
import { LeftPanelSkeletonLoader } from '~/loading/components/LeftPanelSkeletonLoader';
import { RightPanelSkeletonLoader } from '~/loading/components/RightPanelSkeletonLoader';
const StyledContainer = styled.div`
background: ${BACKGROUND_LIGHT.noisy};
box-sizing: border-box;
display: flex;
flex-direction: row;
gap: 12px;
height: 100vh;
min-width: ${DESKTOP_NAV_DRAWER_WIDTHS.menu}px;
width: 100%;
padding: 12px 8px 12px;
overflow: hidden;
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: 100%;
}
`;
export const UserOrMetadataLoader = () => {
return (
<StyledContainer>
<LeftPanelSkeletonLoader />
<RightPanelSkeletonLoader />
</StyledContainer>
);
};