Raphaël Bosi
3ee8fc0973
Front components (dashboard widget, side panel, settings preview) showed blank space during their entire load. They now show a shimmering full-area skeleton continuously, from the lazy chunk load through metadata fetch, token/SDK wait, and worker boot, until the real UI mounts. The skeleton is threaded down as an optional `loadingFallback` prop so the shared `twenty-front-component-renderer` package stays dependency-free (react-loading-skeleton stays in twenty-front). The command-menu headless component opts out by not passing a fallback, so it stays blank as before. <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/23261?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. -->
31 lines
733 B
TypeScript
31 lines
733 B
TypeScript
import { styled } from '@linaria/react';
|
|
import { useContext } from 'react';
|
|
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
|
|
import { ThemeContext } from 'twenty-ui/theme-constants';
|
|
|
|
const StyledContainer = styled.div`
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
& > span {
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
`;
|
|
|
|
export const FrontComponentSkeletonLoader = () => {
|
|
const { theme } = useContext(ThemeContext);
|
|
|
|
return (
|
|
<StyledContainer>
|
|
<SkeletonTheme
|
|
baseColor={theme.background.tertiary}
|
|
highlightColor={theme.background.transparent.lighter}
|
|
borderRadius={theme.border.radius.md}
|
|
>
|
|
<Skeleton height="100%" />
|
|
</SkeletonTheme>
|
|
</StyledContainer>
|
|
);
|
|
};
|