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

feat: enhance refresh button with loading animation for improved user experience

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-04 23:00:58 -05:00
parent 9ba819c9e1
commit 30fcf527d0
1 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
extensions/Servers/Proxmox/views/firewall.blade.php
View File

@@ -1126,18 +1126,28 @@
<div class="absolute top-4 right-4 flex items-center gap-2 z-10">
<button @click="loadConnectionData()"
:disabled="loading"
class="text-base/50 hover:text-primary transition-colors bg-background/80 backdrop-blur-sm rounded-full p-2 hover:bg-background disabled:opacity-50 disabled:cursor-not-allowed"
class="w-9 h-9 flex items-center justify-center text-base/50 hover:text-primary transition-colors bg-background/80 backdrop-blur-sm rounded-full hover:bg-background disabled:opacity-50 disabled:cursor-not-allowed"
title="Refresh data">
<span :class="loading ? 'animate-spin' : ''" class="inline-block">
<template x-if="!loading">
<x-ri-refresh-line class="size-5" />
</span>
</template>
<template x-if="loading">
<div class="w-5 h-5 rounded-full p-[3px] text-primary"
style="background: conic-gradient(from 135deg at top, currentColor 90deg, transparent 0) 0 calc(50% - 2px)/8.5px 4.25px, radial-gradient(farthest-side at bottom left, transparent calc(100% - 3px), currentColor calc(100% - 2px) 99%, transparent) top right/50% 50% content-box content-box, radial-gradient(farthest-side at top, transparent calc(100% - 3px), currentColor calc(100% - 2px) 99%, transparent) bottom/100% 50% content-box content-box; background-repeat: no-repeat; animation: refreshSpin 1s infinite linear;"></div>
</template>
</button>
<button @click="open = false"
class="text-base/50 hover:text-base transition-colors bg-background/80 backdrop-blur-sm rounded-full p-2 hover:bg-background">
class="w-9 h-9 flex items-center justify-center text-base/50 hover:text-base transition-colors bg-background/80 backdrop-blur-sm rounded-full hover:bg-background">
<x-ri-close-line class="size-5" />
</button>
</div>
<style>
@keyframes refreshSpin {
100% { transform: rotate(1turn); }
}
</style>
{{-- Modal Header --}}
<div class="bg-gradient-to-r from-primary/10 to-secondary/10 border-b border-primary/20 p-6">
<div class="flex items-center gap-3">