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

@@ -435,9 +435,12 @@
{{ $server->hostname ?? $status->name ?? 'N/A' }}
</span>
<button wire:click="startEditingHostname" type="button"
class="text-base/70 hover:text-base/60 ml-2"
wire:loading.attr="disabled"
wire:target="startEditingHostname"
class="text-base/70 hover:text-base/60 ml-2 disabled:opacity-50 disabled:cursor-not-allowed"
aria-label="Edit Hostname">
<x-ri-edit-fill class="inline size-4" />
<span wire:loading wire:target="startEditingHostname" class="inline size-4 border-2 border-current border-r-transparent rounded-full animate-spin"></span>
<x-ri-edit-fill wire:loading.remove wire:target="startEditingHostname" class="inline size-4" />
</button>
</div>
</div>
@@ -595,10 +598,13 @@
</button>
@endif
<button type="button"
class="text-base/70 hover:text-base/60 ml-2"
class="text-base/70 hover:text-base/60 ml-2 disabled:opacity-50 disabled:cursor-not-allowed"
wire:click="startEditingPassword"
wire:loading.attr="disabled"
wire:target="startEditingPassword"
aria-label="Edit Root Password">
<x-ri-edit-fill class="inline size-4" />
<span wire:loading wire:target="startEditingPassword" class="inline size-4 border-2 border-current border-r-transparent rounded-full animate-spin"></span>
<x-ri-edit-fill wire:loading.remove wire:target="startEditingPassword" class="inline size-4" />
</button>
</div>
</div>