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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user