Update virtual-machines.tsx

AppImage/components/virtual-machines.tsx

@@ -139,7 +139,7 @@ const fetcher = async (url: string) => {
     headers: {
       "Content-Type": "application/json",
     },
-    signal: AbortSignal.timeout(5000),
+    signal: AbortSignal.timeout(30000),
   })
 
   if (!response.ok) {
@@ -267,6 +267,8 @@ export function VirtualMachines() {
     refreshInterval: 23000,
     revalidateOnFocus: false,
     revalidateOnReconnect: true,
+    dedupingInterval: 10000,
+    errorRetryCount: 2,
   })
 
   const [selectedVM, setSelectedVM] = useState<VMData | null>(null)
@@ -274,6 +276,7 @@ export function VirtualMachines() {
   const [controlLoading, setControlLoading] = useState(false)
   const [detailsLoading, setDetailsLoading] = useState(false)
   const [vmConfigs, setVmConfigs] = useState<Record<number, string>>({})
+  const [loadingLXCIPs, setLoadingLXCIPs] = useState(false)
   const [currentView, setCurrentView] = useState<"main" | "metrics">("main")
   const [showAdditionalInfo, setShowAdditionalInfo] = useState(false)
   const [showNotes, setShowNotes] = useState(false)
@@ -287,27 +290,46 @@ export function VirtualMachines() {
       if (!vmData) return
 
       const lxcs = vmData.filter((vm) => vm.type === "lxc")
+
+      if (lxcs.length === 0) return
+
+      setLoadingLXCIPs(true)
       const configs: Record<number, string> = {}
 
-      await Promise.all(
-        lxcs.map(async (lxc) => {
-          try {
-            const response = await fetch(`/api/vms/${lxc.vmid}`)
-            if (response.ok) {
-              const details = await response.json()
-              if (details.lxc_ip_info?.primary_ip) {
-                configs[lxc.vmid] = details.lxc_ip_info.primary_ip
-              } else if (details.config) {
-                configs[lxc.vmid] = extractIPFromConfig(details.config, details.lxc_ip_info)
-              }
-            }
-          } catch (error) {
-            console.error(`Error fetching config for LXC ${lxc.vmid}:`, error)
-          }
-        }),
-      )
+      const batchSize = 5
+      for (let i = 0; i < lxcs.length; i += batchSize) {
+        const batch = lxcs.slice(i, i + batchSize)
 
-      setVmConfigs(configs)
+        await Promise.all(
+          batch.map(async (lxc) => {
+            try {
+              const controller = new AbortController()
+              const timeoutId = setTimeout(() => controller.abort(), 10000)
+
+              const response = await fetch(`/api/vms/${lxc.vmid}`, {
+                signal: controller.signal,
+              })
+
+              clearTimeout(timeoutId)
+
+              if (response.ok) {
+                const details = await response.json()
+                if (details.lxc_ip_info?.primary_ip) {
+                  configs[lxc.vmid] = details.lxc_ip_info.primary_ip
+                } else if (details.config) {
+                  configs[lxc.vmid] = extractIPFromConfig(details.config, details.lxc_ip_info)
+                }
+              }
+            } catch (error) {
+              console.log(`[v0] Could not fetch IP for LXC ${lxc.vmid}`)
+            }
+          }),
+        )
+
+        setVmConfigs({ ...configs })
+      }
+
+      setLoadingLXCIPs(false)
     }
 
     fetchLXCIPs()
@@ -478,10 +500,12 @@ export function VirtualMachines() {
     return "text-green-500"
   }
 
-  if (isLoading) {
+  if (isLoading || loadingLXCIPs) {
     return (
       <div className="space-y-6">
-        <div className="text-center py-8 text-muted-foreground">Loading virtual machines...</div>
+        <div className="text-center py-8 text-muted-foreground">
+          {isLoading ? "Loading virtual machines..." : "Loading container IPs..."}
+        </div>
       </div>
     )
   }