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.

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>,
         {

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,

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} />

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,