Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: reimplment live telemetry loading animation with progress bar and animated graph icon

Browse Source
This commit is contained in:
Joseph.Rawlings
2026-01-25 17:53:54 -05:00
parent 8aafc9814e
commit 54e065f968
1 changed files with 52 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
extensions/Servers/Proxmox/views/statistics.blade.php
View File

@@ -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);