Update hardware.tsx

AppImage/components/hardware.tsx

@@ -60,17 +60,16 @@ export default function Hardware() {
 
   const [selectedGPU, setSelectedGPU] = useState<GPU | null>(null)
   const [realtimeGPUData, setRealtimeGPUData] = useState<any>(null)
-  const [loadingRealtimeData, setLoadingRealtimeData] = useState(false)
   const [selectedPCIDevice, setSelectedPCIDevice] = useState<PCIDevice | null>(null)
   const [selectedDisk, setSelectedDisk] = useState<StorageDevice | null>(null)
   const [selectedNetwork, setSelectedNetwork] = useState<PCIDevice | null>(null)
 
   const handleGPUClick = async (gpu: GPU) => {
-    setSelectedGPU(gpu)
+    // Don't open modal yet - wait for data first
-    setLoadingRealtimeData(true)
     setRealtimeGPUData(null)
 
     try {
+      console.log("[v0] Fetching real-time GPU data for slot:", gpu.slot)
       const response = await fetch(`http://localhost:8008/api/gpu/${gpu.slot}/realtime`)
       if (response.ok) {
         const data = await response.json()
@@ -83,9 +82,9 @@ export default function Hardware() {
     } catch (error) {
       console.error("[v0] Error fetching real-time GPU data:", error)
       setRealtimeGPUData({ has_monitoring_tool: false })
-    } finally {
-      setLoadingRealtimeData(false)
     }
+
+    setSelectedGPU(gpu)
   }
 
   const findPCIDeviceForGPU = (gpu: GPU): PCIDevice | null => {
@@ -388,18 +387,8 @@ export default function Hardware() {
         <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
           {selectedGPU && (
             <>
-              {loadingRealtimeData ? (
+              {hasRealtimeData()
-                <>
+                ? // Advanced modal with real-time data
-                  <DialogHeader>
-                    <DialogTitle>{selectedGPU.name}</DialogTitle>
-                    <DialogDescription>Loading GPU data...</DialogDescription>
-                  </DialogHeader>
-                  <div className="flex items-center justify-center p-8">
-                    <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
-                  </div>
-                </>
-              ) : hasRealtimeData() ? (
-                // Advanced modal with real-time data
                   (() => {
                     const pciDevice = findPCIDeviceForGPU(selectedGPU)
 
@@ -604,8 +593,7 @@ export default function Hardware() {
                       </>
                     )
                   })()
-              ) : (
+                : // Basic modal without real-time data
-                // Basic modal without real-time data
                   (() => {
                     const pciDevice = findPCIDeviceForGPU(selectedGPU)
 
@@ -693,8 +681,7 @@ export default function Hardware() {
                         </div>
                       </>
                     )
-                })()
+                  })()}
-              )}
             </>
           )}
         </DialogContent>