mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-25 00:07:47 +01: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
65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import { FC } from 'react';
|
|
import { styled, Typography } from '@mui/material';
|
|
|
|
import {
|
|
StyledProjectInfoWidgetContainer,
|
|
StyledWidgetTitle,
|
|
} from './ProjectInfo.styles';
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
|
import { WidgetFooterLink } from './WidgetFooterLink';
|
|
|
|
interface IMetaWidgetProps {
|
|
id?: string;
|
|
description?: string;
|
|
}
|
|
|
|
const StyledIDContainer = styled('div')(({ theme }) => ({
|
|
textAlign: 'left',
|
|
borderRadius: `${theme.shape.borderRadius}px`,
|
|
backgroundColor: `${theme.palette.background.elevation2}`,
|
|
padding: theme.spacing(0.5, 2),
|
|
fontSize: theme.typography.body2.fontSize,
|
|
}));
|
|
|
|
export const MetaWidget: FC<IMetaWidgetProps> = ({ id, description }) => {
|
|
return (
|
|
<StyledProjectInfoWidgetContainer>
|
|
<StyledWidgetTitle data-loading>Project Meta</StyledWidgetTitle>
|
|
<StyledIDContainer data-loading>
|
|
<Typography
|
|
component='span'
|
|
variant='body2'
|
|
color='text.secondary'
|
|
>
|
|
ID:
|
|
</Typography>{' '}
|
|
<code data-loading>{id || '__________'}</code>
|
|
</StyledIDContainer>
|
|
<ConditionallyRender
|
|
condition={Boolean(description)}
|
|
show={
|
|
<Typography
|
|
data-loading
|
|
variant='body2'
|
|
sx={{
|
|
marginTop: (theme) => theme.spacing(1.5),
|
|
marginBottom: 0,
|
|
textAlign: 'left',
|
|
}}
|
|
>
|
|
{description}
|
|
</Typography>
|
|
}
|
|
/>
|
|
<ConditionallyRender
|
|
condition={!description}
|
|
show={
|
|
<WidgetFooterLink to={`/projects/${id}/settings`}>
|
|
Add description
|
|
</WidgetFooterLink>
|
|
}
|
|
/>
|
|
</StyledProjectInfoWidgetContainer>
|
|
);
|
|
};
|