From c556776a7f70c3bb7544979f3efa978e48da9efa Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sun, 25 Jan 2026 18:20:46 -0500
Subject: [PATCH] fix: simplify loading to compact bar with SVG spinner, use
 x-show for proper toggle

---
 .../Proxmox/views/statistics.blade.php        | 82 ++++---------------
 1 file changed, 17 insertions(+), 65 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/statistics.blade.php b/extensions/Servers/Proxmox/views/statistics.blade.php
index 0852a926d..8dc797a11 100644
--- a/extensions/Servers/Proxmox/views/statistics.blade.php
+++ b/extensions/Servers/Proxmox/views/statistics.blade.php
@@ -99,51 +99,6 @@
 
         <!-- Performance Telemetry -->
         <style>
-            .telemetry-loader {
-                color: hsl(var(--color-primary));
-                font-size: 10px;
-                width: 1em;
-                height: 1em;
-                border-radius: 50%;
-                position: relative;
-                text-indent: -9999em;
-                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;
-                }
-                12.5% {
-                    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-                }
-                25% {
-                    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-                }
-                37.5% {
-                    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
-                }
-                50% {
-                    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
-                }
-                62.5% {
-                    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
-                }
-                75% {
-                    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
-                }
-                87.5% {
-                    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
-                }
-            }
             @keyframes telemetryGrow {
                 from { transform: scale(0.98); opacity: 0; }
                 to { transform: scale(1); opacity: 1; }
@@ -157,32 +112,29 @@
             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 shadow-sm overflow-hidden transition-all duration-500 ease-out"
-            :class="chartsLoaded ? 'p-6 space-y-6' : 'py-2 px-4'"
+            class="bg-background-secondary border border-neutral rounded-2xl shadow-sm overflow-hidden"
         >
-            <!-- Loading State - compact, grows when loaded -->
+            <!-- Loading State - compact bar -->
             <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'"
-                class="flex items-center justify-center transition-all duration-500 ease-out overflow-hidden"
+                x-show="!chartsLoaded"
+                class="flex items-center justify-center gap-3 py-3 px-4"
             >
-                <div class="flex items-center gap-3">
-                    <!-- Circular Loading Spinner -->
-                    <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>
-                        <p class="text-base/50 text-xs">Fetching performance data...</p>
-                    </div>
-                </div>
+                <!-- Circular Loading Spinner SVG -->
+                <svg class="w-5 h-5 animate-spin text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                <!-- Loading text -->
+                <span class="text-base/70 text-sm">Loading Telemetry...</span>
             </div>
 
+            <!-- Content - hidden while loading -->
             <div
-                x-bind:class="chartsLoaded ? 'telemetry-grow' : 'opacity-0 max-h-0 overflow-hidden'"
-                class="transition-all duration-500 ease-out"
+                x-show="chartsLoaded"
+                x-transition:enter="transition ease-out duration-300"
+                x-transition:enter-start="opacity-0 transform scale-95"
+                x-transition:enter-end="opacity-100 transform scale-100"
+                class="p-6 space-y-6"
             >
                 <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                     <div>