From 15c9ca4d419caf429f512b2eb43cfb4e35740942 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sun, 25 Jan 2026 17:58:50 -0500
Subject: [PATCH] fix: loading overlay visible by default using opacity classes
 instead of x-show/x-cloak

---
 .../Servers/Proxmox/views/statistics.blade.php      | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/statistics.blade.php b/extensions/Servers/Proxmox/views/statistics.blade.php
index 556395d09..8e785f24a 100644
--- a/extensions/Servers/Proxmox/views/statistics.blade.php
+++ b/extensions/Servers/Proxmox/views/statistics.blade.php
@@ -105,14 +105,12 @@
             @proxmox-chart-loaded.window="loadingProgress = Math.min(100, loadingProgress + 25)"
             class="relative bg-background-secondary border border-neutral rounded-2xl p-6 space-y-6 shadow-sm overflow-hidden"
         >
-            <!-- Loading Overlay -->
+            <!-- Loading Overlay - visible by default, hidden when charts load -->
             <div 
-                x-show="!chartsLoaded"
-                x-cloak
-                x-transition:leave="transition ease-in duration-300"
-                x-transition:leave-start="opacity-100"
-                x-transition:leave-end="opacity-0"
-                class="absolute inset-0 z-20 bg-background-secondary flex flex-col items-center justify-center rounded-2xl"
+                x-ref="loadingOverlay"
+                x-init="$watch('chartsLoaded', value => { if(value) $refs.loadingOverlay.style.display = 'none'; })"
+                x-bind:class="chartsLoaded ? 'opacity-0 pointer-events-none' : 'opacity-100'"
+                class="absolute inset-0 z-20 bg-background-secondary flex flex-col items-center justify-center rounded-2xl transition-opacity duration-300"
             >
                 <div class="flex flex-col items-center gap-4">
                     <!-- Animated Graph Icon -->
@@ -227,7 +225,6 @@
 
                 <div
                     class="grid grid-cols-1 gap-6 xl:grid-cols-2"
-                    :class="chartsLoaded ? '' : 'opacity-0'"
                 >
                 <!-- Processor Utilization Graph -->
             <div>