From 7f1c46a576836326de659cc6c8f588d91d0d09e5 Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Wed, 10 Apr 2024 12:43:22 +0200
Subject: [PATCH] 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.
---
 .../LeadTimeForChanges.test.tsx                |  4 +++-
 .../LeadTimeForChanges/LeadTimeForChanges.tsx  | 18 +++++++++++++++---
 .../ProjectInsights/ProjectInsights.tsx        |  5 ++++-
 .../useProjectInsights/useProjectInsights.ts   |  8 +-------
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectInsights/LeadTimeForChanges/LeadTimeForChanges.test.tsx b/frontend/src/component/project/Project/ProjectInsights/LeadTimeForChanges/LeadTimeForChanges.test.tsx
index 82b70c0104..05ac736462 100644
--- a/frontend/src/component/project/Project/ProjectInsights/LeadTimeForChanges/LeadTimeForChanges.test.tsx
+++ b/frontend/src/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/frontend/src/component/project/Project/ProjectInsights/LeadTimeForChanges/LeadTimeForChanges.tsx b/frontend/src/component/project/Project/ProjectInsights/LeadTimeForChanges/LeadTimeForChanges.tsx
index 2c9dc2752e..82d5261158 100644
--- a/frontend/src/component/project/Project/ProjectInsights/LeadTimeForChanges/LeadTimeForChanges.tsx
+++ b/frontend/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
index de89803c4c..ea653d966c 100644
--- 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
index fdb43ac4a5..8e4ae4faeb 100644
--- 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,