mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-28 17:55:15 +02:00
834ae1d8a4
This PR makes changes to how the project overview skeleton screen works. Important changes: - Add skeleton screens to missing elements, creating a more comprehensive loading screen - Split the page into different loading sections, so that we can load the table when we fetch the next page without affecting the rest of the page. https://www.loom.com/share/e5d30dc897ac488ea80cfae11ffab646 Next steps: * Hide bar if total is less than 25 * Add FE testing
56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import { Box, styled } from '@mui/material';
|
|
import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
|
|
import {
|
|
StyledProjectInfoWidgetContainer,
|
|
StyledWidgetTitle,
|
|
} from './ProjectInfo.styles';
|
|
import { WidgetFooterLink } from './WidgetFooterLink';
|
|
|
|
interface IHealthWidgetProps {
|
|
projectId: string;
|
|
health: number;
|
|
total?: number;
|
|
stale?: number;
|
|
}
|
|
|
|
const StyledParagraphEmphasizedText = styled('p')(({ theme }) => ({
|
|
fontSize: '1.5rem',
|
|
[theme.breakpoints.down('md')]: {
|
|
fontSize: theme.fontSizes.bodySize,
|
|
marginBottom: theme.spacing(4),
|
|
},
|
|
}));
|
|
|
|
const StyledPercentageText = styled('p')(({ theme }) => ({
|
|
fontSize: '1.5rem',
|
|
[theme.breakpoints.down('md')]: {
|
|
fontSize: theme.fontSizes.bodySize,
|
|
},
|
|
}));
|
|
|
|
export const HealthWidget = ({ projectId, health }: IHealthWidgetProps) => {
|
|
return (
|
|
<StyledProjectInfoWidgetContainer>
|
|
<StyledWidgetTitle data-loading>Project health</StyledWidgetTitle>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: (theme) => theme.spacing(2),
|
|
}}
|
|
>
|
|
<StyledPercentageText data-loading>
|
|
<PercentageCircle percentage={health} />
|
|
</StyledPercentageText>
|
|
<StyledParagraphEmphasizedText data-loading>
|
|
{health}%
|
|
</StyledParagraphEmphasizedText>
|
|
</Box>
|
|
<WidgetFooterLink to={`/projects/${projectId}/health`}>
|
|
View project health
|
|
</WidgetFooterLink>
|
|
</StyledProjectInfoWidgetContainer>
|
|
);
|
|
};
|