fix: show loading features only when loading is happening (#6817)

Previously, the dummy data would persist when there is no data coming from the API. This causes us to display dummy data in the dora metrics table which is not correct. This PR fixes that by only showing the loading features when we are actually loading.
Unleash · Apr 10, 2024 · 7f1c46a · 7f1c46a
1 parent 70eb463
commit 7f1c46a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 12 deletions.
diff --git a/.../component/project/Project/ProjectInsights/LeadTimeForChanges/LeadTimeForChanges.test.tsx b/.../component/project/Project/ProjectInsights/LeadTimeForChanges/LeadTimeForChanges.test.tsx
@@ -18,7 +18,9 @@ test('Show outdated SDKs and apps using them', async () => {
         <Routes>
             <Route
                 path={'/projects/:projectId'}
-                element={<LeadTimeForChanges leadTime={leadTime} />}
+                element={
+                    <LeadTimeForChanges leadTime={leadTime} loading={false} />
+                }
             />
         </Routes>,
         {

diff --git a/...d/src/component/project/Project/ProjectInsights/LeadTimeForChanges/LeadTimeForChanges.tsx b/...d/src/component/project/Project/ProjectInsights/LeadTimeForChanges/LeadTimeForChanges.tsx
@@ -45,9 +45,21 @@ const resolveDoraMetrics = (input: number) => {
 
 interface ILeadTimeForChangesProps {
     leadTime: ProjectDoraMetricsSchema;
+    loading: boolean;
 }
 
-export const LeadTimeForChanges = ({ leadTime }: ILeadTimeForChangesProps) => {
+const loadingLeadTimeFeatures = [
+    { name: 'feature1', timeToProduction: 0 },
+    { name: 'feature2', timeToProduction: 0 },
+    { name: 'feature3', timeToProduction: 0 },
+    { name: 'feature4', timeToProduction: 0 },
+    { name: 'feature5', timeToProduction: 2 },
+];
+
+export const LeadTimeForChanges = ({
+    leadTime,
+    loading,
+}: ILeadTimeForChangesProps) => {
     const columns = useMemo(
         () => [
             {
@@ -157,7 +169,7 @@ export const LeadTimeForChanges = ({ leadTime }: ILeadTimeForChangesProps) => {
                 disableSortBy: true,
             },
         ],
-        [JSON.stringify(leadTime.features)],
+        [JSON.stringify(leadTime.features), loading],
     );
 
     const initialState = useMemo(
@@ -185,7 +197,7 @@ export const LeadTimeForChanges = ({ leadTime }: ILeadTimeForChangesProps) => {
     } = useTable(
         {
             columns: columns as any[],
-            data: leadTime.features,
+            data: loading ? loadingLeadTimeFeatures : leadTime.features,
             initialState,
             autoResetGlobalFilter: false,
             autoResetSortBy: false,

diff --git a/frontend/src/component/project/Project/ProjectInsights/ProjectInsights.tsx b/frontend/src/component/project/Project/ProjectInsights/ProjectInsights.tsx
@@ -52,7 +52,10 @@ export const ProjectInsights = () => {
                 <ProjectHealth health={data.health} />
             </MediumWideContainer>
             <WideContainer>
-                <LeadTimeForChanges leadTime={data.leadTime} />
+                <LeadTimeForChanges
+                    leadTime={data.leadTime}
+                    loading={loading}
+                />
             </WideContainer>
             <NarrowContainer>
                 <FlagTypesUsed featureTypeCounts={data.featureTypeCounts} />

diff --git a/frontend/src/hooks/api/getters/useProjectInsights/useProjectInsights.ts b/frontend/src/hooks/api/getters/useProjectInsights/useProjectInsights.ts
@@ -31,13 +31,7 @@ const placeholderData: ProjectInsightsSchema = {
     ],
     leadTime: {
         projectAverage: 0,
-        features: [
-            { name: 'feature1', timeToProduction: 0 },
-            { name: 'feature2', timeToProduction: 0 },
-            { name: 'feature3', timeToProduction: 0 },
-            { name: 'feature4', timeToProduction: 0 },
-            { name: 'feature5', timeToProduction: 2 },
-        ],
+        features: [],
     },
     health: {
         rating: 0,