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

fix: move loading overlay to be direct child of section for proper positioning

Browse Source
This commit is contained in:
Joseph.Rawlings
2026-01-25 17:56:44 -05:00
parent 54e065f968
commit 6899ed0e3f
1 changed files with 37 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -105,6 +105,43 @@
@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"
>
<!-- Loading Overlay -->
<div
x-show="!chartsLoaded"
x-cloak
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-20 bg-background-secondary flex flex-col items-center justify-center rounded-2xl"
>
<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>
<div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
<div>
@@ -188,42 +225,6 @@
</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"
:class="chartsLoaded ? '' : 'opacity-0'"