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,12 +290,28 @@ 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> = {}
 
+      const batchSize = 5
+      for (let i = 0; i < lxcs.length; i += batchSize) {
+        const batch = lxcs.slice(i, i + batchSize)
+
         await Promise.all(
-        lxcs.map(async (lxc) => {
+          batch.map(async (lxc) => {
             try {
-            const response = await fetch(`/api/vms/${lxc.vmid}`)
+              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) {
@@ -302,12 +321,15 @@ export function VirtualMachines() {
                 }
               }
             } catch (error) {
-            console.error(`Error fetching config for LXC ${lxc.vmid}:`, error)
+              console.log(`[v0] Could not fetch IP for LXC ${lxc.vmid}`)
             }
           }),
         )
 
-      setVmConfigs(configs)
+        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>
     )
   }