From 8167fff232bfad2cff190c64f216d6838b91c3ae Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sun, 25 Jan 2026 18:19:06 -0500
Subject: [PATCH] fix: add container for loader to show box-shadow animation,
 make section compact

---
 .../Proxmox/views/statistics.blade.php        | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/statistics.blade.php b/extensions/Servers/Proxmox/views/statistics.blade.php
index 376806e89..0852a926d 100644
--- a/extensions/Servers/Proxmox/views/statistics.blade.php
+++ b/extensions/Servers/Proxmox/views/statistics.blade.php
@@ -101,7 +101,7 @@
         <style>
             .telemetry-loader {
                 color: hsl(var(--color-primary));
-                font-size: 8px;
+                font-size: 10px;
                 width: 1em;
                 height: 1em;
                 border-radius: 50%;
@@ -110,6 +110,14 @@
                 animation: mulShdSpin 1.3s infinite linear;
                 transform: translateZ(0);
             }
+            .telemetry-loader-container {
+                width: 60px;
+                height: 60px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-shrink: 0;
+            }
             @keyframes mulShdSpin {
                 0%, 100% {
                     box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
@@ -150,18 +158,20 @@
             @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 shadow-sm overflow-hidden transition-all duration-500 ease-out"
-            :class="chartsLoaded ? 'p-6 space-y-6' : 'p-3'"
+            :class="chartsLoaded ? 'p-6 space-y-6' : 'py-2 px-4'"
         >
             <!-- Loading State - compact, grows when loaded -->
             <div 
                 x-ref="loadingOverlay"
                 x-init="$watch('chartsLoaded', value => { if(value) setTimeout(() => $refs.loadingOverlay.style.display = 'none', 500); })"
-                x-bind:class="chartsLoaded ? 'opacity-0 h-0 py-0' : 'opacity-100 py-4'"
+                x-bind:class="chartsLoaded ? 'opacity-0 h-0 py-0' : 'opacity-100'"
                 class="flex items-center justify-center transition-all duration-500 ease-out overflow-hidden"
             >
-                <div class="flex items-center gap-4">
+                <div class="flex items-center gap-3">
                     <!-- Circular Loading Spinner -->
-                    <div class="telemetry-loader"></div>
+                    <div class="telemetry-loader-container">
+                        <div class="telemetry-loader"></div>
+                    </div>
                     <!-- Loading text -->
                     <div>
                         <p class="text-base/80 font-medium text-sm">Loading Telemetry</p>