From 87848d6eea8de4355555b49053745d8045ababc3 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sun, 25 Jan 2026 18:04:56 -0500
Subject: [PATCH] feat: compact loading animation with circular spinner, grows
 on load

---
 .../Proxmox/views/statistics.blade.php        | 46 ++++++++-----------
 1 file changed, 19 insertions(+), 27 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/statistics.blade.php b/extensions/Servers/Proxmox/views/statistics.blade.php
index 8e785f24a..9aefb537a 100644
--- a/extensions/Servers/Proxmox/views/statistics.blade.php
+++ b/extensions/Servers/Proxmox/views/statistics.blade.php
@@ -103,44 +103,36 @@
             x-data="{ chartsLoaded: false, loadingProgress: 0 }"
             @proxmox-all-stats-loaded.window="chartsLoaded = true"
             @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"
+            class="relative bg-background-secondary border border-neutral rounded-2xl shadow-sm overflow-hidden"
+            :class="chartsLoaded ? 'p-6 space-y-6' : 'p-4'"
         >
-            <!-- Loading Overlay - visible by default, hidden when charts load -->
+            <!-- Loading State - compact, grows when loaded -->
             <div 
                 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"
+                x-init="$watch('chartsLoaded', value => { if(value) setTimeout(() => $refs.loadingOverlay.style.display = 'none', 300); })"
+                x-bind:class="chartsLoaded ? 'opacity-0 h-0 py-0' : 'opacity-100 py-8'"
+                class="flex flex-col items-center justify-center transition-all duration-500 ease-out overflow-hidden"
             >
-                <div class="flex flex-col items-center gap-4">
-                    <!-- Animated Graph Icon -->
-                    <div class="relative w-20 h-20">
-                        <svg class="w-20 h-20 text-primary" viewBox="0 0 80 80" fill="none">
-                            <!-- Graph background -->
-                            <rect x="10" y="10" width="60" height="60" rx="4" class="fill-primary/5 stroke-primary/20" stroke-width="1"/>
-                            <!-- Animated bars -->
-                            <rect x="18" y="50" width="8" height="16" rx="1" class="fill-primary/40 animate-pulse" style="animation-delay: 0ms"/>
-                            <rect x="30" y="38" width="8" height="28" rx="1" class="fill-primary/60 animate-pulse" style="animation-delay: 150ms"/>
-                            <rect x="42" y="26" width="8" height="40" rx="1" class="fill-primary/80 animate-pulse" style="animation-delay: 300ms"/>
-                            <rect x="54" y="32" width="8" height="34" rx="1" class="fill-primary animate-pulse" style="animation-delay: 450ms"/>
+                <div class="flex items-center gap-4">
+                    <!-- Circular Loading Spinner -->
+                    <div class="relative w-10 h-10">
+                        <svg class="w-10 h-10 animate-spin" viewBox="0 0 40 40" fill="none">
+                            <circle cx="20" cy="20" r="16" stroke="currentColor" stroke-width="3" class="text-neutral/30"/>
+                            <path d="M20 4 A16 16 0 0 1 36 20" stroke="currentColor" stroke-width="3" stroke-linecap="round" class="text-primary"/>
                         </svg>
                     </div>
                     <!-- Loading text -->
-                    <div class="text-center">
-                        <p class="text-base/80 font-medium">Loading Telemetry</p>
-                        <p class="text-base/50 text-sm mt-1">Fetching performance data...</p>
-                    </div>
-                    <!-- Progress bar -->
-                    <div class="w-48 h-1.5 bg-neutral/30 rounded-full overflow-hidden">
-                        <div 
-                            class="h-full bg-primary rounded-full transition-all duration-500 ease-out"
-                            :style="'width: ' + loadingProgress + '%'"
-                        ></div>
+                    <div>
+                        <p class="text-base/80 font-medium text-sm">Loading Telemetry</p>
+                        <p class="text-base/50 text-xs">Fetching performance data...</p>
                     </div>
                 </div>
             </div>
 
-            <div>
+            <div
+                x-bind:class="chartsLoaded ? 'opacity-100 max-h-[5000px]' : 'opacity-0 max-h-0 overflow-hidden'"
+                class="transition-all duration-500 ease-out"
+            >
                 <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                     <div>
                         <h2 class="text-lg font-semibold flex items-center gap-2">