Minimized API request between Tab view change

lightrag_webui/src/components/graph/GraphLabels.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import { AsyncSelect } from '@/components/ui/AsyncSelect'
 import { useSettingsStore } from '@/stores/settings'
 import { useGraphStore } from '@/stores/graph'
@@ -10,6 +10,37 @@ const GraphLabels = () => {
   const { t } = useTranslation()
   const label = useSettingsStore.use.queryLabel()
   const allDatabaseLabels = useGraphStore.use.allDatabaseLabels()
+  const labelsLoadedRef = useRef(false)
+  
+  // Track if a fetch is in progress to prevent multiple simultaneous fetches
+  const fetchInProgressRef = useRef(false)
+  
+  // Fetch labels once on component mount, using global flag to prevent duplicates
+  useEffect(() => {
+    // Check if we've already attempted to fetch labels in this session
+    const labelsFetchAttempted = useGraphStore.getState().labelsFetchAttempted
+    
+    // Only fetch if we haven't attempted in this session and no fetch is in progress
+    if (!labelsFetchAttempted && !fetchInProgressRef.current) {
+      fetchInProgressRef.current = true
+      // Set global flag to indicate we've attempted to fetch in this session
+      useGraphStore.getState().setLabelsFetchAttempted(true)
+      
+      console.log('Fetching graph labels (once per session)...')
+      
+      useGraphStore.getState().fetchAllDatabaseLabels()
+        .then(() => {
+          labelsLoadedRef.current = true
+          fetchInProgressRef.current = false
+        })
+        .catch((error) => {
+          console.error('Failed to fetch labels:', error)
+          fetchInProgressRef.current = false
+          // Reset global flag to allow retry
+          useGraphStore.getState().setLabelsFetchAttempted(false)
+        })
+    }
+  }, []) // Empty dependency array ensures this only runs once on mount
 
   const getSearchEngine = useCallback(() => {
     // Create search engine

lightrag_webui/src/components/ui/TabContent.tsx

@@ -25,12 +25,10 @@ const TabContent: React.FC<TabContentProps> = ({ tabId, children, className = ''
     };
   }, [tabId, setTabVisibility]);
 
-  if (!isVisible) {
-    return null;
-  }
-
+  // Use CSS to hide content instead of not rendering it
+  // This prevents components from unmounting when tabs are switched
   return (
-    <div className={className}>
+    <div className={`${className} ${isVisible ? '' : 'hidden'}`}>
       {children}
     </div>
   );