fixing refreshing bug on graph

Author: Hubert-Szczepanski-SAP

public/locales/en.json

@@ -290,7 +290,7 @@
   "Graphs": {
     "colorsProvider": "Provider",
     "colorsProviderConfig": "Provider Config",
-    "colorizedTitle": "Colorized Graph by: ",
+    "colorizedTitle": "Visualize: ",
     "loadingError": "Error loading graph data",
     "loadingGraph": "Loading graph data...",
     "noResources": "No resources to display"

src/components/Graphs/useGraph.ts

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useState } from 'react';
+import { useMemo, useEffect, useRef, useState } from 'react';
 import { useApiResource, useProvidersConfigResource } from '../../lib/api/useApiResource';
 import { ManagedResourcesRequest } from '../../lib/api/types/crossplane/listManagedResources';
 import { resourcesInterval } from '../../lib/shared/constants';
@@ -92,11 +92,13 @@ export function useGraph(colorBy: ColorBy, onYamlClick: (item: ManagedResourceIt
     refreshInterval: resourcesInterval,
   });
 
-  const loading = managedResourcesLoading || providerConfigsLoading;
+  const initialLoaded = useRef(false);
+  const isInitialLoading = (managedResourcesLoading || providerConfigsLoading) && !initialLoaded.current;
   const error = managedResourcesError || providerConfigsError;
 
   const treeData = useMemo(() => {
     if (!managedResources || !providerConfigsList) return [];
+    if (!initialLoaded.current) initialLoaded.current = true;
     const allNodesMap = new Map<string, NodeData>();
     managedResources.forEach((group: ManagedResourceGroup) => {
       group.items?.forEach((item: ManagedResourceItem) => {
@@ -160,7 +162,7 @@ export function useGraph(colorBy: ColorBy, onYamlClick: (item: ManagedResourceIt
       });
     });
     return Array.from(allNodesMap.values());
-  }, [managedResources, providerConfigsList, onYamlClick]);
+  }, [managedResources, providerConfigsList, onYamlClick, initialLoaded]);
 
   const colorMap = useMemo(() => generateColorMap(treeData, colorBy), [treeData, colorBy]);
 
@@ -178,5 +180,5 @@ export function useGraph(colorBy: ColorBy, onYamlClick: (item: ManagedResourceIt
     setEdges(edges);
   }, [treeData, colorBy, colorMap]);
 
-  return { nodes, edges, colorMap, loading, error };
+  return { nodes, edges, colorMap, loading: isInitialLoading, error };
 }