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

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

Browse Source 
- 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:
Joseph.Rawlings
2026-01-24 20:50:44 -05:00
parent 3192235ffa
commit f4828be3be
4 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
extensions/Servers/Proxmox/views/backups.blade.php
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>

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

@@ -383,8 +383,9 @@
<div x-show="activeTab === 'rules'" x-transition>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">Firewall Rules</h3>
<button type="button" wire:click="startCreateRule" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium flex items-center gap-2">
<x-ri-add-line class="size-4" />
<button type="button" wire:click="startCreateRule" wire:loading.attr="disabled" wire:target="startCreateRule" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
<span wire:loading wire:target="startCreateRule" class="size-4 border-2 border-current border-r-transparent rounded-full animate-spin"></span>
<x-ri-add-line wire:loading.remove wire:target="startCreateRule" class="size-4" />
Add Rule
</button>
</div>
@@ -661,8 +662,9 @@
<h3 class="text-lg font-semibold">IP Aliases</h3>
<p class="text-sm text-base/60">Create named references to IP addresses or CIDR ranges</p>
</div>
<button type="button" wire:click="startCreateAlias" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium flex items-center gap-2">
<x-ri-add-line class="size-4" />
<button type="button" wire:click="startCreateAlias" wire:loading.attr="disabled" wire:target="startCreateAlias" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
<span wire:loading wire:target="startCreateAlias" class="size-4 border-2 border-current border-r-transparent rounded-full animate-spin"></span>
<x-ri-add-line wire:loading.remove wire:target="startCreateAlias" class="size-4" />
Add Alias
</button>
</div>
@@ -711,8 +713,9 @@
<h3 class="text-lg font-semibold">IP Sets</h3>
<p class="text-sm text-base/60">Group multiple IPs/CIDRs for easier rule management</p>
</div>
<button type="button" wire:click="startCreateIPSet" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium flex items-center gap-2">
<x-ri-add-line class="size-4" />
<button type="button" wire:click="startCreateIPSet" wire:loading.attr="disabled" wire:target="startCreateIPSet" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
<span wire:loading wire:target="startCreateIPSet" class="size-4 border-2 border-current border-r-transparent rounded-full animate-spin"></span>
<x-ri-add-line wire:loading.remove wire:target="startCreateIPSet" class="size-4" />
Create IP Set
</button>
</div>

14
extensions/Servers/Proxmox/views/overview.blade.php
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>

10
extensions/Servers/Proxmox/views/subdomain.blade.php
View File

@@ -155,8 +155,9 @@
</div>
</div>
</div>
<x-button.primary wire:click="$set('showCreateModal', true)" :disabled="count($this->availableIpsForSubdomain) === 0" class="!w-auto flex-shrink-0">
<x-ri-add-circle-fill class="size-4" />
<x-button.primary wire:click="$set('showCreateModal', true)" :disabled="count($this->availableIpsForSubdomain) === 0" wire:loading.attr="disabled" class="!w-auto flex-shrink-0">
<span wire:loading wire:target="$set('showCreateModal', true)" class="size-4 border-2 border-current border-r-transparent rounded-full animate-spin"></span>
<x-ri-add-circle-fill wire:loading.remove wire:target="$set('showCreateModal', true)" class="size-4" />
Create Subdomain
</x-button.primary>
</div>
@@ -255,8 +256,9 @@
@endif
</div>
<div class="flex gap-2">
<x-button.danger wire:click="openDeleteModal('{{ $zone['subdomain'] }}', {{ $zone['ipAddressId'] }})">
<x-ri-delete-bin-line class="size-4" />
<x-button.danger wire:click="openDeleteModal('{{ $zone['subdomain'] }}', {{ $zone['ipAddressId'] }})" wire:loading.attr="disabled" wire:target="openDeleteModal('{{ $zone['subdomain'] }}', {{ $zone['ipAddressId'] }})">
<span wire:loading wire:target="openDeleteModal('{{ $zone['subdomain'] }}', {{ $zone['ipAddressId'] }})" class="size-4 border-2 border-current border-r-transparent rounded-full animate-spin"></span>
<x-ri-delete-bin-line wire:loading.remove wire:target="openDeleteModal('{{ $zone['subdomain'] }}', {{ $zone['ipAddressId'] }})" class="size-4" />
Delete
</x-button.danger>
</div>