feat(insights): user stats widget loading state

Unleash · Apr 11, 2024 · c3364a4 · c3364a4
1 parent 5f74ba7
commit c3364a4
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/frontend/src/component/insights/InsightsCharts.tsx b/frontend/src/component/insights/InsightsCharts.tsx
@@ -147,6 +147,7 @@ export const InsightsCharts: VFC<IChartsProps> = ({
                         flagsPerUser={
                             showAllProjects ? getFlagsPerUser(flags, users) : ''
                         }
+                        isLoading={loading}
                     />
                 </Widget>
                 <ConditionallyRender

diff --git a/frontend/src/component/insights/componentsStat/FlagStats/FlagStats.tsx b/frontend/src/component/insights/componentsStat/FlagStats/FlagStats.tsx
@@ -68,17 +68,21 @@ const StyledIcon = styled(Icon)(({ theme }) => ({
 interface IFlagStatsProps {
     count: number;
     flagsPerUser?: string;
+    isLoading?: boolean;
 }
 
 export const FlagStats: React.FC<IFlagStatsProps> = ({
     count,
     flagsPerUser,
+    isLoading,
 }) => {
     return (
         <>
             <StyledRingContainer>
                 <StyledRing>
-                    <StyledRingContent>{count}</StyledRingContent>
+                    <StyledRingContent>
+                        {isLoading ? '' : count}
+                    </StyledRingContent>
                 </StyledRing>
             </StyledRingContainer>
 

diff --git a/frontend/src/component/insights/componentsStat/UserStats/UserStats.tsx b/frontend/src/component/insights/componentsStat/UserStats/UserStats.tsx
@@ -70,9 +70,21 @@ interface IUserStatsProps {
     count: number;
     active?: number;
     inactive?: number;
+    isLoading?: boolean;
 }
 
-export const UserStats: FC<IUserStatsProps> = ({ count, active, inactive }) => {
+const StyledLoadingSkeleton = styled(Box)(() => ({
+    '&:before': {
+        background: 'transparent',
+    },
+}));
+
+export const UserStats: FC<IUserStatsProps> = ({
+    count,
+    active,
+    inactive,
+    isLoading,
+}) => {
     const showInactiveUsers = useUiFlag('showInactiveUsers');
     const showDistribution =
         showInactiveUsers && active !== undefined && inactive !== undefined;
@@ -83,9 +95,19 @@ export const UserStats: FC<IUserStatsProps> = ({ count, active, inactive }) => {
             <StyledUserContainer>
                 <StyledUserBox>
                     <StyledUserCount variant='h2'>
-                        {Number.parseInt(`${count}`, 10) === count
-                            ? count
-                            : count.toFixed(2)}
+                        <ConditionallyRender
+                            condition={isLoading !== true}
+                            show={
+                                Number.parseInt(`${count}`, 10) === count
+                                    ? count
+                                    : count.toFixed(2)
+                            }
+                            elseShow={
+                                <StyledLoadingSkeleton className='skeleton'>
+                                    &nbsp;
+                                </StyledLoadingSkeleton>
+                            }
+                        />
                     </StyledUserCount>
                 </StyledUserBox>
                 <StyledCustomShadow />