Fixes flash in charts on first load

frontend/src/api/prometheus/const.ts

@@ -1 +1,8 @@
+import { DEFAULT_CONTEXT_DATA } from '~/utilities/const';
+
 export const PROMETHEUS_BIAS_PATH = '/api/prometheus/bias';
+
+export const DEFAULT_PENDING_CONTEXT_RESOURCE = {
+  ...DEFAULT_CONTEXT_DATA,
+  pending: false,
+};

frontend/src/api/prometheus/kservePerformanceMetrics.ts

@@ -5,6 +5,8 @@ import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 import { TimeframeTitle } from '~/concepts/metrics/types';
 import useQueryRangeResourceData from '~/api/prometheus/useQueryRangeResourceData';
 import { PendingContextResourceData, PrometheusQueryRangeResultValue } from '~/types';
+import { DEFAULT_CONTEXT_DATA } from '~/utilities/const';
+import { DEFAULT_PENDING_CONTEXT_RESOURCE } from '~/api/prometheus/const';
 
 type RequestCountData = {
   data: {
@@ -51,7 +53,10 @@ export const useFetchKserveRequestCountData = (
     [failedCount, successCount],
   );
 
-  return useAllSettledContextResourceData(data);
+  return useAllSettledContextResourceData(data, {
+    successCount: DEFAULT_PENDING_CONTEXT_RESOURCE,
+    failedCount: DEFAULT_PENDING_CONTEXT_RESOURCE,
+  });
 };
 
 type MeanLatencyData = {
@@ -96,7 +101,10 @@ export const useFetchKserveMeanLatencyData = (
     [inferenceLatency, requestLatency],
   );
 
-  return useAllSettledContextResourceData(data);
+  return useAllSettledContextResourceData(data, {
+    inferenceLatency: DEFAULT_PENDING_CONTEXT_RESOURCE,
+    requestLatency: DEFAULT_PENDING_CONTEXT_RESOURCE,
+  });
 };
 
 type CpuUsageData = {
@@ -130,7 +138,9 @@ export const useFetchKserveCpuUsageData = (
     [cpuUsage],
   );
 
-  return useAllSettledContextResourceData(data);
+  return useAllSettledContextResourceData(data, {
+    cpuUsage: DEFAULT_PENDING_CONTEXT_RESOURCE,
+  });
 };
 
 type MemoryUsageData = {
@@ -164,14 +174,17 @@ export const useFetchKserveMemoryUsageData = (
     [memoryUsage],
   );
 
-  return useAllSettledContextResourceData(data);
+  return useAllSettledContextResourceData(data, {
+    memoryUsage: DEFAULT_PENDING_CONTEXT_RESOURCE,
+  });
 };
 
 const useAllSettledContextResourceData = <
   T,
   U extends Record<string, PendingContextResourceData<T>>,
 >(
   data: U,
+  defaultValue: U,
 ) => {
   const refreshAll = React.useCallback(() => {
     Object.values(data).forEach((x) => x.refresh());
@@ -186,10 +199,9 @@ const useAllSettledContextResourceData = <
   );
 
   // store the result in a reference and only update the reference so long as there are no pending queries
-  //TODO: this creates a bug where the first render may contain a mix of pending / non pending data, causing a flash.
-  //      need to take a default empty value to return first time.
-  const resultRef = React.useRef(result);
+  const resultRef = React.useRef({ data: defaultValue, refreshAll });
 
+  // only update the ref when all values are settled, i.e. not pending.
   if (!Object.values(result.data).some((x) => x.pending)) {
     resultRef.current = result;
   }