From 54e065f9686229af59d2ab7f51805994c961001e Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sun, 25 Jan 2026 17:53:54 -0500
Subject: [PATCH] feat: reimplment live telemetry loading animation with
 progress bar and animated graph icon

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

diff --git a/extensions/Servers/Proxmox/views/statistics.blade.php b/extensions/Servers/Proxmox/views/statistics.blade.php
index 2eadca325..9af33c53b 100644
--- a/extensions/Servers/Proxmox/views/statistics.blade.php
+++ b/extensions/Servers/Proxmox/views/statistics.blade.php
@@ -100,10 +100,10 @@
         <!-- Performance Telemetry -->
         <section
             wire:poll.120s="stats"
-            x-data="{ chartsLoaded: false }"
+            x-data="{ chartsLoaded: false, loadingProgress: 0 }"
             @proxmox-all-stats-loaded.window="chartsLoaded = true"
-            class="relative bg-background-secondary border border-neutral rounded-2xl p-6 space-y-6 shadow-sm overflow-hidden transition-opacity duration-300 ease-out"
-            :class="chartsLoaded ? 'opacity-100' : 'opacity-80'"
+            @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"
         >
             <div>
                 <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
@@ -188,9 +188,45 @@
                     </div>
                 </div>
 
+                <!-- Loading Overlay -->
+                <div 
+                    x-show="!chartsLoaded" 
+                    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-10 bg-background-secondary/95 backdrop-blur-sm flex flex-col items-center justify-center"
+                >
+                    <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"/>
+                            </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>
+                    </div>
+                </div>
+
                 <div
-                    class="grid grid-cols-1 gap-6 xl:grid-cols-2 transition-[max-height] duration-300 ease-out"
-                    :class="chartsLoaded ? 'max-h-none' : 'max-h-[260px] overflow-hidden'"
+                    class="grid grid-cols-1 gap-6 xl:grid-cols-2"
+                    :class="chartsLoaded ? '' : 'opacity-0'"
                 >
                 <!-- Processor Utilization Graph -->
             <div>
@@ -5106,6 +5142,13 @@
             }
         }
 
+        // Dispatch progress event when individual chart loads
+        function dispatchChartLoaded(chartType) {
+            try {
+                window.dispatchEvent(new CustomEvent('proxmox-chart-loaded', { detail: { chart: chartType } }));
+            } catch (e) {}
+        }
+
         function dispatchStatsWithRetry() {
             // Reset retry counters
             chartRetryAttempts = { cpu: 0, memory: 0, network: 0, disk: 0 };
@@ -5272,6 +5315,7 @@
 
                     // Mark that this chart has successfully received data
                     cpuChartHasData = true;
+                    dispatchChartLoaded('cpu');
                     checkAllChartsLoaded();
                 } catch (e) {
                     console.error('Error updating CPU chart:', e, eventData);
@@ -5305,6 +5349,7 @@
 
                     // Mark that this chart has successfully received data
                     memoryChartHasData = true;
+                    dispatchChartLoaded('memory');
                     checkAllChartsLoaded();
                 } catch (e) {
                     console.error('Error updating Memory chart:', e, eventData);
@@ -5366,6 +5411,7 @@
 
                     // Mark that this chart has successfully received data
                     networkChartHasData = true;
+                    dispatchChartLoaded('network');
                     checkAllChartsLoaded();
                 } catch (e) {
                     console.error('Error updating Network chart:', e, eventData);
@@ -5407,6 +5453,7 @@
 
                     // Mark that this chart has successfully received data
                     diskChartHasData = true;
+                    dispatchChartLoaded('disk');
                     checkAllChartsLoaded();
                 } catch (e) {
                     console.error('Error updating Disk chart:', e, eventData);