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
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import {
|
|
StyledProjectInfoWidgetContainer,
|
|
StyledWidgetTitle,
|
|
} from './ProjectInfo.styles';
|
|
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
|
import { StatusBox } from '../ProjectStats/StatusBox';
|
|
import { WidgetFooterLink } from './WidgetFooterLink';
|
|
import { Box } from '@mui/material';
|
|
|
|
interface IProjectMembersWidgetProps {
|
|
projectId: string;
|
|
memberCount: number;
|
|
change?: number;
|
|
}
|
|
|
|
export const ProjectMembersWidget = ({
|
|
projectId,
|
|
memberCount,
|
|
change = 0,
|
|
}: IProjectMembersWidgetProps) => {
|
|
const { uiConfig } = useUiConfig();
|
|
|
|
let link = `/admin/users`;
|
|
|
|
if (uiConfig?.versionInfo?.current?.enterprise) {
|
|
link = `/projects/${projectId}/settings/access`;
|
|
}
|
|
|
|
return (
|
|
<StyledProjectInfoWidgetContainer>
|
|
<StyledWidgetTitle data-loading>Project members</StyledWidgetTitle>
|
|
<Box
|
|
data-loading
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<StatusBox boxText={`${memberCount}`} change={change} />
|
|
</Box>
|
|
<WidgetFooterLink data-loading to={link}>
|
|
View all members
|
|
</WidgetFooterLink>
|
|
</StyledProjectInfoWidgetContainer>
|
|
);
|
|
};
|