Minimized API request between Tab view change

lightrag_webui/src/features/ApiSite.tsx

@@ -1,5 +1,38 @@
+import { useState, useEffect } from 'react'
+import { useTabVisibility } from '@/contexts/useTabVisibility'
 import { backendBaseUrl } from '@/lib/constants'
 
 export default function ApiSite() {
-  return <iframe src={backendBaseUrl + '/docs'} className="size-full" />
+  const { isTabVisible } = useTabVisibility()
+  const isApiTabVisible = isTabVisible('api')
+  const [iframeLoaded, setIframeLoaded] = useState(false)
+  
+  // Load the iframe once on component mount
+  useEffect(() => {
+    if (!iframeLoaded) {
+      setIframeLoaded(true)
+    }
+  }, [iframeLoaded])
+  
+  // Use CSS to hide content when tab is not visible
+  return (
+    <div className={`size-full ${isApiTabVisible ? '' : 'hidden'}`}>
+      {iframeLoaded ? (
+        <iframe 
+          src={backendBaseUrl + '/docs'} 
+          className="size-full w-full h-full"
+          style={{ width: '100%', height: '100%', border: 'none' }}
+          // Use key to ensure iframe doesn't reload
+          key="api-docs-iframe"
+        />
+      ) : (
+        <div className="flex h-full w-full items-center justify-center bg-background">
+          <div className="text-center">
+            <div className="mb-2 h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
+            <p>Loading API Documentation...</p>
+          </div>
+        </div>
+      )}
+    </div>
+  )
 }

lightrag_webui/src/features/DocumentManager.tsx

@@ -1,5 +1,6 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useTabVisibility } from '@/contexts/useTabVisibility'
 import Button from '@/components/ui/Button'
 import {
   Table,
@@ -26,6 +27,9 @@ export default function DocumentManager() {
   const { t } = useTranslation()
   const health = useBackendState.use.health()
   const [docs, setDocs] = useState<DocsStatusesResponse | null>(null)
+  const { isTabVisible } = useTabVisibility()
+  const isDocumentsTabVisible = isTabVisible('documents')
+  const initialLoadRef = useRef(false)
 
   const fetchDocuments = useCallback(async () => {
     try {
@@ -50,9 +54,13 @@ export default function DocumentManager() {
     }
   }, [setDocs, t])
 
+  // Only fetch documents when the tab becomes visible for the first time
   useEffect(() => {
-    fetchDocuments()
-  }, [fetchDocuments, t])
+    if (isDocumentsTabVisible && !initialLoadRef.current) {
+      fetchDocuments()
+      initialLoadRef.current = true
+    }
+  }, [isDocumentsTabVisible, fetchDocuments])
 
   const scanDocuments = useCallback(async () => {
     try {
@@ -63,19 +71,22 @@ export default function DocumentManager() {
     }
   }, [t])
 
+  // Only set up polling when the tab is visible and health is good
   useEffect(() => {
+    if (!isDocumentsTabVisible || !health) {
+      return
+    }
+    
     const interval = setInterval(async () => {
-      if (!health) {
-        return
-      }
       try {
         await fetchDocuments()
       } catch (err) {
         toast.error(t('documentPanel.documentManager.errors.scanProgressFailed', { error: errorMessage(err) }))
       }
     }, 5000)
+    
     return () => clearInterval(interval)
-  }, [health, fetchDocuments, t])
+  }, [health, fetchDocuments, t, isDocumentsTabVisible])
 
   return (
     <Card className="!size-full !rounded-none !border-none">

lightrag_webui/src/features/GraphViewer.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState, useCallback, useMemo, useRef } from 'react'
+import { useTabVisibility } from '@/contexts/useTabVisibility'
 // import { MiniMap } from '@react-sigma/minimap'
 import { SigmaContainer, useRegisterEvents, useSigma } from '@react-sigma/core'
 import { Settings as SigmaSettings } from 'sigma/settings'
@@ -107,10 +108,17 @@ const GraphEvents = () => {
 const GraphViewer = () => {
   const [sigmaSettings, setSigmaSettings] = useState(defaultSigmaSettings)
   const sigmaRef = useRef<any>(null)
+  const initAttemptedRef = useRef(false)
 
   const selectedNode = useGraphStore.use.selectedNode()
   const focusedNode = useGraphStore.use.focusedNode()
   const moveToSelectedNode = useGraphStore.use.moveToSelectedNode()
+  const isFetching = useGraphStore.use.isFetching()
+  const shouldRender = useGraphStore.use.shouldRender() // Rendering control state
+  
+  // Get tab visibility
+  const { isTabVisible } = useTabVisibility()
+  const isGraphTabVisible = isTabVisible('knowledge-graph')
 
   const showPropertyPanel = useSettingsStore.use.showPropertyPanel()
   const showNodeSearchBar = useSettingsStore.use.showNodeSearchBar()
@@ -120,6 +128,15 @@ const GraphViewer = () => {
   const enableNodeDrag = useSettingsStore.use.enableNodeDrag()
   const renderEdgeLabels = useSettingsStore.use.showEdgeLabel()
 
+  // Ensure rendering is enabled when tab becomes visible
+  useEffect(() => {
+    if (isGraphTabVisible && !shouldRender && !isFetching && !initAttemptedRef.current) {
+      // If tab is visible but graph is not rendering, try to enable rendering
+      useGraphStore.getState().setShouldRender(true)
+      initAttemptedRef.current = true
+    }
+  }, [isGraphTabVisible, shouldRender, isFetching])
+
   useEffect(() => {
     setSigmaSettings({
       ...defaultSigmaSettings,
@@ -148,6 +165,24 @@ const GraphViewer = () => {
     [selectedNode]
   )
 
+  // If we shouldn't render, show loading state or empty state
+  if (!shouldRender) {
+    return (
+      <div className="flex h-full w-full items-center justify-center bg-background">
+        {isFetching ? (
+          <div className="text-center">
+            <div className="mb-2 h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
+            <p>Reloading Graph Data...</p>
+          </div>
+        ) : (
+          <div className="text-center text-muted-foreground">
+            {/* Empty or hint message */}
+          </div>
+        )}
+      </div>
+    )
+  }
+
   return (
     <SigmaContainer
       settings={sigmaSettings}