fixing this in useProvidersConfigResource

Author: Hubert-Szczepanski-SAP

src/components/Graphs/useGraph.ts

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useRef, useState } from 'react';
+import { useMemo, useEffect, 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,13 +92,11 @@ export function useGraph(colorBy: ColorBy, onYamlClick: (item: ManagedResourceIt
     refreshInterval: resourcesInterval,
   });
 
-  const initialLoaded = useRef(false);
-  const isInitialLoading = (managedResourcesLoading || providerConfigsLoading) && !initialLoaded.current;
+  const loading = managedResourcesLoading || providerConfigsLoading;
   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) => {
@@ -162,7 +160,7 @@ export function useGraph(colorBy: ColorBy, onYamlClick: (item: ManagedResourceIt
       });
     });
     return Array.from(allNodesMap.values());
-  }, [managedResources, providerConfigsList, onYamlClick, initialLoaded]);
+  }, [managedResources, providerConfigsList, onYamlClick]);
 
   const colorMap = useMemo(() => generateColorMap(treeData, colorBy), [treeData, colorBy]);
 
@@ -180,5 +178,5 @@ export function useGraph(colorBy: ColorBy, onYamlClick: (item: ManagedResourceIt
     setEdges(edges);
   }, [treeData, colorBy, colorMap]);
 
-  return { nodes, edges, colorMap, loading: isInitialLoading, error };
+  return { nodes, edges, colorMap, loading, error };
 }

src/lib/api/useApiResource.ts

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState, useRef } from 'react';
 import useSWR, { SWRConfiguration, useSWRConfig } from 'swr';
 import { fetchApiServerJson } from './fetch';
 import { ApiConfigContext } from '../../components/Shared/k8s';
@@ -120,17 +120,19 @@ export const useProvidersConfigResource = (config?: SWRConfiguration) => {
   };
   const [configs, setConfigs] = useState<ProviderConfigs[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const initialLoaded = useRef(false);
 
   useEffect(() => {
     const fetchDataAndUpdateState = async () => {
-      setIsLoading(true);
+      if (!initialLoaded.current) setIsLoading(true);
       try {
         await fetchProviderConfigsData();
         const finalData = await fetchProviderConfigs();
 
         setConfigs(finalData);
-        if (finalData.length > 0) {
+        if (!initialLoaded.current) {
           setIsLoading(false);
+          initialLoaded.current = true;
         }
       } catch (_) {
         setIsLoading(false);