Remove loading section from live telemetry

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

@@ -98,82 +98,11 @@
         </div>
 
         <!-- Performance Telemetry -->
-        <style>
-            @keyframes telemetryGrow {
-                from { transform: scale(0.98); opacity: 0; }
-                to { transform: scale(1); opacity: 1; }
-            }
-            .telemetry-grow {
-                animation: telemetryGrow 0.4s ease-out forwards;
-            }
-            /* Ensure loading shows by default before Alpine initializes */
-            [x-cloak] { display: none !important; }
-            
-            .telemetry-loader {
-                color: #008FFB;
-                font-size: 10px;
-                width: 1em;
-                height: 1em;
-                border-radius: 50%;
-                position: relative;
-                text-indent: -9999em;
-                animation: mulShdSpin 1.3s infinite linear;
-                transform: translateZ(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;
-                }
-            }
-        </style>
         <section
             wire:poll.120s="stats"
-            x-data="{ chartsLoaded: false, loadingProgress: 0 }"
-            @proxmox-all-stats-loaded.window="chartsLoaded = true"
-            @proxmox-chart-loaded.window="loadingProgress = Math.min(100, loadingProgress + 25)"
             class="bg-background-secondary border border-neutral rounded-2xl shadow-sm overflow-hidden"
         >
-            <!-- Loading State - compact bar, visible by default -->
+            <div class="p-6 space-y-6">
-            <div
-                x-show="!chartsLoaded"
-                class="flex items-center justify-center gap-4 py-4 px-4"
-            >
-                <!-- Circular Loading Spinner -->
-                <div class="telemetry-loader"></div>
-                <!-- Loading text -->
-                <span class="text-base/70 text-sm">Loading Telemetry...</span>
-            </div>
-
-            <!-- Content - hidden by default with x-cloak until Alpine shows it -->
-            <div
-                x-cloak
-                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>
                         <h2 class="text-lg font-semibold flex items-center gap-2">
@@ -5157,29 +5086,6 @@
             }, chartRetryDelay);
         }
 
-        // Check if all charts have loaded and dispatch event
-        function checkAllChartsLoaded() {
-            var allExpectedChartsHaveData =
-                (!cpuChartExpected || cpuChartHasData) &&
-                (!memoryChartExpected || memoryChartHasData) &&
-                (!networkChartExpected || networkChartHasData) &&
-                (!diskChartExpected || diskChartHasData);
-
-            if (allExpectedChartsHaveData) {
-                console.log('All expected charts have received data.');
-                try {
-                    window.dispatchEvent(new CustomEvent('proxmox-all-stats-loaded'));
-                } catch (e) {}
-            }
-        }
-
-        // 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 };
@@ -5344,10 +5250,7 @@
                 }),
             }]);
 
-                    // Mark that this chart has successfully received data
                     cpuChartHasData = true;
-                    dispatchChartLoaded('cpu');
-                    checkAllChartsLoaded();
                 } catch (e) {
                     console.error('Error updating CPU chart:', e, eventData);
                 }
@@ -5378,10 +5281,7 @@
                         }),
                     }]);
 
-                    // Mark that this chart has successfully received data
                     memoryChartHasData = true;
-                    dispatchChartLoaded('memory');
-                    checkAllChartsLoaded();
                 } catch (e) {
                     console.error('Error updating Memory chart:', e, eventData);
                 }
@@ -5440,10 +5340,7 @@
                 })
             }]);
 
-                    // Mark that this chart has successfully received data
                     networkChartHasData = true;
-                    dispatchChartLoaded('network');
-                    checkAllChartsLoaded();
                 } catch (e) {
                     console.error('Error updating Network chart:', e, eventData);
                 }
@@ -5482,10 +5379,7 @@
                 })
             }]);
 
-                    // Mark that this chart has successfully received data
                     diskChartHasData = true;
-                    dispatchChartLoaded('disk');
-                    checkAllChartsLoaded();
                 } catch (e) {
                     console.error('Error updating Disk chart:', e, eventData);
                 }