perf: add loading indicators to modal-opening buttons across views

- firewall.blade.php: Add Rule, Add Alias, Create IP Set buttons
- subdomain.blade.php: Create Subdomain, Delete buttons
- backups.blade.php: Restore, Delete buttons
- overview.blade.php: Hostname edit, Password edit buttons

Provides immediate visual feedback while waiting for server response.
This commit is contained in:
2026-01-24 20:50:44 -05:00
parent 3192235ffa
commit f4828be3be
4 changed files with 32 additions and 17 deletions

View File

@@ -100,13 +100,17 @@
<td class="px-4 py-4 align-middle">
<div class="flex flex-wrap items-center justify-center gap-2">
<button @click="$wire.set('showRestore', true); $wire.set('volid', '{{ $backup->volid }}')"
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold flex items-center gap-2">
wire:loading.attr="disabled"
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
<x-ri-checkbox-circle-fill class="w-4 h-4"/> Restore
</button>
<button
wire:click="promptDelete('{{ $backup->volid }}')"
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold flex items-center gap-2 text-error">
<x-ri-delete-bin-fill class="w-4 h-4"/> Delete
wire:loading.attr="disabled"
wire:target="promptDelete('{{ $backup->volid }}')"
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold flex items-center gap-2 text-error disabled:opacity-50 disabled:cursor-not-allowed">
<span wire:loading wire:target="promptDelete('{{ $backup->volid }}')" class="w-4 h-4 border-2 border-current border-r-transparent rounded-full animate-spin"></span>
<x-ri-delete-bin-fill wire:loading.remove wire:target="promptDelete('{{ $backup->volid }}')" class="w-4 h-4"/> Delete
</button>
</div>
</td>