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

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

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-01 08:19:47 -05:00
parent de0ae55d50
commit 555ccb8496
1 changed files with 40 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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