Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

feat: skeleton loaders for personal dashboard (#8313)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-10-01 10:16:20 +02:00 committed by GitHub
parent a8eda9d61f
commit 7ac283aa50
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 38 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/component/personalDashboard/ConnectSDK.tsx
View File

@ -46,7 +46,7 @@ const ActionBox = styled('div')(({ theme }) => ({
export const CreateFlag: FC<{ project: string }> = ({ project }) => { export const CreateFlag: FC<{ project: string }> = ({ project }) => {
return ( return (
<ActionBox> <ActionBox data-loading>
<TitleContainer> <TitleContainer>
<NeutralCircleContainer>1</NeutralCircleContainer> <NeutralCircleContainer>1</NeutralCircleContainer>
Create a feature flag Create a feature flag
@ -90,7 +90,7 @@ export const ExistingFlag: FC<{ project: string }> = ({ project }) => {
export const ConnectSDK: FC<{ project: string }> = ({ project }) => { export const ConnectSDK: FC<{ project: string }> = ({ project }) => {
return ( return (
<ActionBox> <ActionBox data-loading>
{' '} {' '}
<TitleContainer> <TitleContainer>
<NeutralCircleContainer>2</NeutralCircleContainer> <NeutralCircleContainer>2</NeutralCircleContainer>

20
frontend/src/component/personalDashboard/FlagMetricsChart.tsx
View File

@ -23,7 +23,6 @@ import {
createPlaceholderBarChartOptions, createPlaceholderBarChartOptions,
} from './createChartOptions'; } from './createChartOptions';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature'; import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import { customHighlightPlugin } from '../common/Chart/customHighlightPlugin';
const defaultYes = [ const defaultYes = [
45_000_000, 28_000_000, 28_000_000, 25_000_000, 50_000_000, 27_000_000, 45_000_000, 28_000_000, 28_000_000, 25_000_000, 50_000_000, 27_000_000,
@ -67,7 +66,7 @@ export const PlaceholderFlagMetricsChart = () => {
return ( return (
<> <>
<Typography sx={{ mb: 4 }}>Feature flag metrics</Typography> <Typography sx={{ mb: 4 }}>No feature flag metrics data</Typography>
<Bar <Bar
data={placeholderData} data={placeholderData}
options={options} options={options}
@ -173,6 +172,8 @@ export const FlagMetricsChart: FC<{
const { data, options } = useFlagMetrics(flag.name, environment, hoursBack); const { data, options } = useFlagMetrics(flag.name, environment, hoursBack);
const noData = data.datasets[0].data.length === 0;
return ( return (
<> <>
<MetricsSelectors> <MetricsSelectors>
@ -190,12 +191,15 @@ export const FlagMetricsChart: FC<{
/> />
</MetricsSelectors> </MetricsSelectors>
<Bar {noData ? (
data={data} <PlaceholderFlagMetricsChart />
plugins={[customHighlightPlugin(30, 0)]} ) : (
options={options} <Bar
aria-label='A bar chart with a single feature flag exposure metrics' data={data}
/> options={options}
aria-label='A bar chart with a single feature flag exposure metrics'
/>
)}
</> </>
); );
}; };

39
frontend/src/component/personalDashboard/PersonalDashboard.tsx
View File

@ -31,6 +31,7 @@ import { ContentGridNoProjects } from './ContentGridNoProjects';
import { LatestProjectEvents } from './LatestProjectEvents'; import { LatestProjectEvents } from './LatestProjectEvents';
import { usePersonalDashboardProjectDetails } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboardProjectDetails'; import { usePersonalDashboardProjectDetails } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboardProjectDetails';
import HelpOutline from '@mui/icons-material/HelpOutline'; import HelpOutline from '@mui/icons-material/HelpOutline';
import useLoading from '../../hooks/useLoading';
const ScreenExplanation = styled('div')(({ theme }) => ({ const ScreenExplanation = styled('div')(({ theme }) => ({
marginBottom: theme.spacing(4), marginBottom: theme.spacing(4),
@ -166,8 +167,11 @@ export const PersonalDashboard = () => {
const name = user?.name; const name = user?.name;
const { personalDashboard, refetch: refetchDashboard } = const {
usePersonalDashboard(); personalDashboard,
refetch: refetchDashboard,
loading: personalDashboardLoading,
} = usePersonalDashboard();
const [activeFlag, setActiveFlag] = useState< const [activeFlag, setActiveFlag] = useState<
PersonalDashboardSchema['flags'][0] | null PersonalDashboardSchema['flags'][0] | null
>(null); >(null);
@ -202,29 +206,33 @@ export const PersonalDashboard = () => {
personalDashboardProjectDetails?.onboardingStatus.status === personalDashboardProjectDetails?.onboardingStatus.status ===
'onboarded'; 'onboarded';
const projectStageRef = useLoading(stage === 'loading');
return ( return (
<div> <div ref={projectStageRef}>
<Typography component='h2' variant='h2'> <Typography component='h2' variant='h2'>
Welcome {name} Welcome {name}
</Typography> </Typography>
<ScreenExplanation> <ScreenExplanation>
<p> <p data-loading>
{onboarded {onboarded
? 'We have gathered projects and flags you have favorited or owned' ? 'We have gathered projects and flags you have favorited or owned'
: null} : null}
{setupIncomplete {setupIncomplete
? 'Here are some tasks we think would be useful in order to get the most out of Unleash' ? 'Here are some tasks we think would be useful in order to get the most out of Unleash'
: null} : null}
{stage === 'loading'
? 'We have gathered projects and flags you have favorited or owned'
: null}
</p> </p>
{setupIncomplete ? ( <IconButton
<IconButton data-loading
size={'small'} size={'small'}
title='Key concepts' title='Key concepts'
onClick={() => setWelcomeDialog('open')} onClick={() => setWelcomeDialog('open')}
> >
<HelpOutline /> <HelpOutline />
</IconButton> </IconButton>
) : null}
</ScreenExplanation> </ScreenExplanation>
{noProjects && personalDashboard ? ( {noProjects && personalDashboard ? (
@ -299,7 +307,8 @@ export const PersonalDashboard = () => {
{stage === 'onboarded' ? ( {stage === 'onboarded' ? (
<ProjectSetupComplete project={activeProject} /> <ProjectSetupComplete project={activeProject} />
) : null} ) : null}
{stage === 'onboarding-started' ? ( {stage === 'onboarding-started' ||
stage === 'loading' ? (
<CreateFlag project={activeProject} /> <CreateFlag project={activeProject} />
) : null} ) : null}
{stage === 'first-flag-created' ? ( {stage === 'first-flag-created' ? (
@ -315,7 +324,7 @@ export const PersonalDashboard = () => {
} }
/> />
) : null} ) : null}
{setupIncomplete ? ( {setupIncomplete || stage === 'loading' ? (
<ConnectSDK project={activeProject} /> <ConnectSDK project={activeProject} />
) : null} ) : null}
</SpacedGridItem> </SpacedGridItem>