feat: enhance loading experience for server statistics with improved loading indicators and blur overlay

extensions/Servers/Proxmox/views/statistics.blade.php

@@ -2,7 +2,41 @@
     @once
         <script src="https://cdn.jsdelivr.net/npm/apexcharts" onload="window.apexChartsLoaded = true"></script>
     @endonce
-    <div class="flex flex-col gap-6">
+    <div
+        class="relative flex flex-col gap-6 overflow-hidden"
+        x-data="{ pageLoading: true }"
+        x-init="
+            (function () {
+                var timeoutId = setTimeout(function () {
+                    pageLoading = false;
+                }, 8000);
+
+                function handleLoaded() {
+                    try {
+                        clearTimeout(timeoutId);
+                    } catch (e) {}
+                    pageLoading = false;
+                    document.removeEventListener('proxmox:all-stats-loaded', handleLoaded);
+                }
+
+                document.addEventListener('proxmox:all-stats-loaded', handleLoaded);
+            })()
+        "
+    >
+        <!-- Full-page blur overlay while initial stats load -->
+        <div
+            x-show="pageLoading"
+            x-transition.opacity
+            class="absolute inset-0 z-40 flex items-center justify-center bg-background/80 backdrop-blur-sm"
+        >
+            <div class="flex flex-col items-center gap-3 text-base/70">
+                <svg class="animate-spin h-8 w-8 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>
+                <p class="text-sm font-semibold">Loading server statistics…</p>
+            </div>
+        </div>
         <style>
             .formRight select {
                 background-color: hsl(var(--color-background));
@@ -100,26 +134,9 @@
         <!-- Performance Telemetry -->
         <section
             wire:poll.120s="stats"
-            x-data="{ loading: true }"
-            x-init="setTimeout(() => loading = false, 4000)"
             class="relative bg-background-secondary border border-neutral rounded-2xl p-6 space-y-6 shadow-sm overflow-hidden"
         >
-            <!-- Blur overlay while telemetry data is loading -->
+            <div>
-            <div
-                x-show="loading"
-                x-transition.opacity
-                class="absolute inset-0 z-30 flex items-center justify-center bg-background/80 backdrop-blur-sm"
-            >
-                <div class="flex flex-col items-center gap-3 text-base/70">
-                    <svg class="animate-spin h-8 w-8 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>
-                    <p class="text-sm font-semibold">Loading telemetry data…</p>
-                </div>
-            </div>
-
-            <div :class="loading ? 'blur-sm pointer-events-none select-none overflow-hidden' : ''">
                 <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">
@@ -1933,25 +1950,8 @@
         id="network-analysis-card"
         style="width: 100%;"
         wire:init="loadNetworkAnalysis"
-        x-data="{ loading: true }"
-        x-init="setTimeout(() => loading = false, 4000)"
     >
-        <!-- Blur overlay while Network Analysis is loading -->
+        <div>
-        <div
-            x-show="loading"
-            x-transition.opacity
-            class="absolute inset-0 z-30 flex items-center justify-center bg-background/80 backdrop-blur-sm"
-        >
-            <div class="flex flex-col items-center gap-3 text-base/70">
-                <svg class="animate-spin h-8 w-8 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>
-                <p class="text-sm font-semibold">Loading network analysis…</p>
-            </div>
-        </div>
-
-        <div :class="loading ? 'blur-sm pointer-events-none select-none overflow-hidden' : ''">
         <div class="p-6 border-b border-neutral flex items-center justify-between gap-3 flex-wrap">
             <div class="flex items-center gap-2">
                 <x-ri-router-line class="size-5" />
@@ -4334,6 +4334,9 @@
 
                     if (allExpectedChartsHaveData) {
                         console.log('All expected charts have received data – stopping stats retries.');
+                        try {
+                            document.dispatchEvent(new CustomEvent('proxmox:all-stats-loaded'));
+                        } catch (e) {}
                         return;
                     }