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

feat: improve loading logic for telemetry and network analysis sections by utilizing session storage to prevent unnecessary loading delays

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-01 08:13:50 -05:00
parent 109ab19239
commit db93de4b14
1 changed files with 42 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -101,7 +101,24 @@
<section
wire:poll.120s="stats"
x-data="{ loading: true }"
x-init="setTimeout(() => loading = false, 4000)"
x-init="
(function () {
var serverId = {{ $server->id ?? 0 }};
var key = 'statsTelemetryLoaded_' + serverId;
if (window.sessionStorage && sessionStorage.getItem(key) === 'true') {
loading = false;
return;
}
setTimeout(function () {
loading = false;
try {
if (window.sessionStorage) {
sessionStorage.setItem(key, 'true');
}
} catch (e) {}
}, 4000);
})()
"
class="relative bg-background-secondary border border-neutral rounded-2xl p-6 space-y-6 shadow-sm"
>
<!-- Blur overlay while telemetry data is loading -->
@@ -111,15 +128,15 @@
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 fill="none" viewBox="0 0 24 24" class="size-8 animate-spin text-primary">
<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 0 1 8-8v4a4 4 0 0 0-4 4H4z"></path>
<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' : ''">
<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">
@@ -1934,7 +1951,24 @@
style="width: 100%;"
wire:init="loadNetworkAnalysis"
x-data="{ loading: true }"
x-init="setTimeout(() => loading = false, 4000)"
x-init="
(function () {
var serverId = {{ $server->id ?? 0 }};
var key = 'networkAnalysisLoaded_' + serverId;
if (window.sessionStorage && sessionStorage.getItem(key) === 'true') {
loading = false;
return;
}
setTimeout(function () {
loading = false;
try {
if (window.sessionStorage) {
sessionStorage.setItem(key, 'true');
}
} catch (e) {}
}, 4000);
})()
"
>
<!-- Blur overlay while Network Analysis is loading -->
<div
@@ -1943,15 +1977,15 @@
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 fill="none" viewBox="0 0 24 24" class="size-8 animate-spin text-primary">
<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 0 1 8-8v4a4 4 0 0 0-4 4H4z"></path>
<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' : ''">
<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" />