refactor: update delete rule button in Proxmox Firewall component to improve loading state handling and enhance user feedback

This commit is contained in:
2025-12-01 14:52:28 -05:00
parent 2877f65051
commit d5c9a6b2b7

View File

@@ -62,6 +62,7 @@
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
}
.delete-rule-button:hover {
background-color: #dc2626;
@@ -587,15 +588,15 @@
wire:click="deleteRule"
wire:loading.attr="disabled"
class="delete-rule-button">
<x-ri-delete-bin-line class="size-4" wire:loading.remove wire:target="deleteRule" />
<svg wire:loading.remove wire:target="deleteRule" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3zm1 2H6v12h12V8zm-9 3h2v6H9v-6zm4 0h2v6h-2v-6zM9 4v2h6V4H9z"/>
</svg>
<svg wire:loading wire:target="deleteRule" class="animate-spin size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span wire:loading.remove wire:target="deleteRule">Delete Rule</span>
<span wire:loading wire:target="deleteRule" class="flex items-center gap-2">
<svg class="animate-spin size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Deleting...
</span>
<span wire:loading wire:target="deleteRule">Deleting...</span>
</button>
</div>
</div>