Raphaël Bosi
c596a5e342
## Description Promotes the next-gen UI library (formerly `twenty-new-ui`) to the name **`twenty-ui`** (v0.1.0, publishable) and renames the old package to **`twenty-ui-deprecated`**. Rewrites ~1,730 `twenty-ui` imports → `twenty-ui-deprecated`, updates all configs/CI/Docker/deps, and migrates twenty-front's `Toggle` to the new package (first consumer) as a drop-in. ## Next steps - Wire the `ui/v*` publish dispatch (`cd-deploy-tag.yaml` + `.yarnrc.yml`), then tag `ui/v0.1.0` to publish. - Continue migrating components from `twenty-ui-deprecated` → `twenty-ui`.
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
|
|
import { PageBody } from '@/ui/layout/page/components/PageBody';
|
|
import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/constants/PageBarMinHeight';
|
|
import { styled } from '@linaria/react';
|
|
import { useContext } from 'react';
|
|
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
|
|
import {
|
|
ThemeContext,
|
|
themeCssVariables,
|
|
} from 'twenty-ui-deprecated/theme-constants';
|
|
|
|
const StyledHeaderSkeleton = styled.div`
|
|
align-items: center;
|
|
background: ${themeCssVariables.background.noisy};
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: ${themeCssVariables.spacing[2]};
|
|
justify-content: space-between;
|
|
min-height: ${PAGE_BAR_MIN_HEIGHT}px;
|
|
padding: ${themeCssVariables.spacing[3]};
|
|
`;
|
|
|
|
const StyledHeaderLeft = styled.div`
|
|
flex: 1;
|
|
`;
|
|
|
|
export const PageContentSkeletonLoader = () => {
|
|
const { theme } = useContext(ThemeContext);
|
|
|
|
return (
|
|
<>
|
|
<StyledHeaderSkeleton>
|
|
<StyledHeaderLeft>
|
|
<SkeletonTheme
|
|
baseColor={theme.background.tertiary}
|
|
highlightColor={theme.background.transparent.lighter}
|
|
borderRadius={4}
|
|
>
|
|
<Skeleton
|
|
height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
|
|
width={104}
|
|
/>
|
|
</SkeletonTheme>
|
|
</StyledHeaderLeft>
|
|
<SkeletonTheme
|
|
baseColor={theme.background.tertiary}
|
|
highlightColor={theme.background.transparent.lighter}
|
|
borderRadius={4}
|
|
>
|
|
<Skeleton
|
|
width={132}
|
|
height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
|
|
/>
|
|
</SkeletonTheme>
|
|
</StyledHeaderSkeleton>
|
|
<PageBody>{null}</PageBody>
|
|
</>
|
|
);
|
|
};
|