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>
+  )
 }