feat: skeleton loaders for personal dashboard (#8313)

frontend/src/component/personalDashboard/ConnectSDK.tsx

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

frontend/src/component/personalDashboard/FlagMetricsChart.tsx

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

frontend/src/component/personalDashboard/PersonalDashboard.tsx

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