From 46dcab551954c2a29466ca7f87a89d81786d9dd0 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sat, 24 Jan 2026 21:06:16 -0500
Subject: [PATCH] style: replace simple spinner with animated loader

- Add new .loader CSS class with clip-path animation
- Uses loader-clip and loader-rotate keyframe animations
- Replaces border-spinner with more polished visual effect
- Applied across storage, firewall, backups, overview, subdomain views
---
 .../Servers/Proxmox/views/backups.blade.php   |  2 +-
 .../Servers/Proxmox/views/firewall.blade.php  |  6 +--
 .../Servers/Proxmox/views/overview.blade.php  |  4 +-
 .../Servers/Proxmox/views/storage.blade.php   | 16 ++++----
 .../Servers/Proxmox/views/subdomain.blade.php |  4 +-
 themes/lucentui/css/app.css                   | 40 +++++++++++++++++++
 6 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/backups.blade.php b/extensions/Servers/Proxmox/views/backups.blade.php
index 4699f226f..63209eaa7 100644
--- a/extensions/Servers/Proxmox/views/backups.blade.php
+++ b/extensions/Servers/Proxmox/views/backups.blade.php
@@ -109,7 +109,7 @@
                                             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>
+                                            <span wire:loading wire:target="promptDelete('{{ $backup->volid }}')" class="loader w-4 h-4"></span>
                                             <x-ri-delete-bin-fill wire:loading.remove wire:target="promptDelete('{{ $backup->volid }}')" class="w-4 h-4"/> Delete
                                         </button>
                                     </div>
diff --git a/extensions/Servers/Proxmox/views/firewall.blade.php b/extensions/Servers/Proxmox/views/firewall.blade.php
index 2a0855117..6bd7fa700 100644
--- a/extensions/Servers/Proxmox/views/firewall.blade.php
+++ b/extensions/Servers/Proxmox/views/firewall.blade.php
@@ -384,7 +384,7 @@
                     <div class="flex items-center justify-between mb-4">
                         <h3 class="text-lg font-semibold">Firewall Rules</h3>
                         <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>
+                            <span wire:loading wire:target="startCreateRule" class="loader size-4"></span>
                             <x-ri-add-line wire:loading.remove wire:target="startCreateRule" class="size-4" />
                             Add Rule
                                         </button>
@@ -663,7 +663,7 @@
                             <p class="text-sm text-base/60">Create named references to IP addresses or CIDR ranges</p>
                                                     </div>
                         <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>
+                            <span wire:loading wire:target="startCreateAlias" class="loader size-4"></span>
                             <x-ri-add-line wire:loading.remove wire:target="startCreateAlias" class="size-4" />
                             Add Alias
                         </button>
@@ -714,7 +714,7 @@
                             <p class="text-sm text-base/60">Group multiple IPs/CIDRs for easier rule management</p>
                                                                 </div>
                         <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>
+                            <span wire:loading wire:target="startCreateIPSet" class="loader size-4"></span>
                             <x-ri-add-line wire:loading.remove wire:target="startCreateIPSet" class="size-4" />
                             Create IP Set
                                                             </button>
diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index c116bbe6b..84f0a9fda 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -439,7 +439,7 @@
                                             wire:target="startEditingHostname"
                                             class="text-base/70 hover:text-base/60 ml-2 disabled:opacity-50 disabled:cursor-not-allowed"
                                             aria-label="Edit Hostname">
-                                        <span wire:loading wire:target="startEditingHostname" class="inline size-4 border-2 border-current border-r-transparent rounded-full animate-spin"></span>
+                                        <span wire:loading wire:target="startEditingHostname" class="loader inline size-4"></span>
                                         <x-ri-edit-fill wire:loading.remove wire:target="startEditingHostname" class="inline size-4" />
                                     </button>
                                 </div>
@@ -603,7 +603,7 @@
                                             wire:loading.attr="disabled"
                                             wire:target="startEditingPassword"
                                             aria-label="Edit Root Password">
-                                        <span wire:loading wire:target="startEditingPassword" class="inline size-4 border-2 border-current border-r-transparent rounded-full animate-spin"></span>
+                                        <span wire:loading wire:target="startEditingPassword" class="loader inline size-4"></span>
                                         <x-ri-edit-fill wire:loading.remove wire:target="startEditingPassword" class="inline size-4" />
                                     </button>
                                 </div>
diff --git a/extensions/Servers/Proxmox/views/storage.blade.php b/extensions/Servers/Proxmox/views/storage.blade.php
index db063242a..e6500f45c 100644
--- a/extensions/Servers/Proxmox/views/storage.blade.php
+++ b/extensions/Servers/Proxmox/views/storage.blade.php
@@ -152,7 +152,7 @@
                                 wire:loading.attr="disabled"
                                 wire:loading.class="opacity-75"
                                 class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors">
-                            <x-ri-loader-4-line class="size-4 animate-spin" wire:loading wire:target="openAddDriveModal" />
+                            <span class="loader size-4" wire:loading wire:target="openAddDriveModal"></span>
                             <x-ri-add-line class="size-4" wire:loading.remove wire:target="openAddDriveModal" />
                             Add Drive
                         </button>
@@ -350,7 +350,7 @@
                                                 wire:loading.attr="disabled"
                                                 wire:target="openEditDriveModal('{{ $driveKey }}')"
                                                 class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-neutral bg-background hover:bg-background-secondary transition-colors">
-                                            <x-ri-loader-4-line class="size-3.5 animate-spin" wire:loading wire:target="openEditDriveModal('{{ $driveKey }}')" />
+                                            <span class="loader size-3.5" wire:loading wire:target="openEditDriveModal('{{ $driveKey }}')"></span>
                                             <x-ri-settings-3-line class="size-3.5" wire:loading.remove wire:target="openEditDriveModal('{{ $driveKey }}')" />
                                             Settings
                                         </button>
@@ -358,7 +358,7 @@
                                                 wire:loading.attr="disabled"
                                                 wire:target="openMoveDriveModal('{{ $driveKey }}')"
                                                 class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-neutral bg-background hover:bg-background-secondary transition-colors">
-                                            <x-ri-loader-4-line class="size-3.5 animate-spin" wire:loading wire:target="openMoveDriveModal('{{ $driveKey }}')" />
+                                            <span class="loader size-3.5" wire:loading wire:target="openMoveDriveModal('{{ $driveKey }}')"></span>
                                             <x-ri-arrow-left-right-line class="size-3.5" wire:loading.remove wire:target="openMoveDriveModal('{{ $driveKey }}')" />
                                             Device Bus
                                         </button>
@@ -376,7 +376,7 @@
                                                     style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(234 179 8 / 0.5); background-color: rgb(234 179 8 / 0.1); color: rgb(234 179 8); transition: background-color 0.15s ease;"
                                                     onmouseover="this.style.backgroundColor='rgb(234 179 8 / 0.2)'"
                                                     onmouseout="this.style.backgroundColor='rgb(234 179 8 / 0.1)'">
-                                                <x-ri-loader-4-line class="size-3.5 animate-spin" wire:loading wire:target="openDetachModal('{{ $driveKey }}')" />
+                                                <span class="loader size-3.5" wire:loading wire:target="openDetachModal('{{ $driveKey }}')"></span>
                                                 <x-ri-eject-line class="size-3.5" wire:loading.remove wire:target="openDetachModal('{{ $driveKey }}')" />
                                                 Detach
                                             </button>
@@ -385,7 +385,7 @@
                                                 wire:loading.attr="disabled"
                                                 wire:target="openDeleteModal('{{ $driveKey }}')"
                                                 class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-danger/50 bg-danger/10 text-danger hover:bg-danger/20 transition-colors">
-                                            <x-ri-loader-4-line class="size-3.5 animate-spin" wire:loading wire:target="openDeleteModal('{{ $driveKey }}')" />
+                                            <span class="loader size-3.5" wire:loading wire:target="openDeleteModal('{{ $driveKey }}')"></span>
                                             <x-ri-delete-bin-line class="size-3.5" wire:loading.remove wire:target="openDeleteModal('{{ $driveKey }}')" />
                                             Delete
                                         </button>
@@ -483,7 +483,7 @@
                                                 style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(239 68 68 / 0.5); background-color: rgb(239 68 68 / 0.1); color: rgb(239 68 68); transition: background-color 0.15s ease;"
                                                 onmouseover="this.style.backgroundColor='rgb(239 68 68 / 0.2)'"
                                                 onmouseout="this.style.backgroundColor='rgb(239 68 68 / 0.1)'">
-                                            <span wire:loading wire:target="deleteUnusedDrive('{{ $unusedKey }}')" class="size-3.5 border-2 border-current border-r-transparent rounded-full animate-spin"></span>
+                                            <span wire:loading wire:target="deleteUnusedDrive('{{ $unusedKey }}')" class="loader size-3.5"></span>
                                             <x-ri-delete-bin-line wire:loading.remove wire:target="deleteUnusedDrive('{{ $unusedKey }}')" class="size-3.5" />
                                             Delete
                                         </button>
@@ -492,7 +492,7 @@
                                                 wire:loading.attr="disabled"
                                                 wire:target="openReattachModal('{{ $unusedKey }}')"
                                                 class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-success/50 bg-success/10 text-success hover:bg-success/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
-                                            <span wire:loading wire:target="openReattachModal('{{ $unusedKey }}')" class="size-3.5 border-2 border-current border-r-transparent rounded-full animate-spin"></span>
+                                            <span wire:loading wire:target="openReattachModal('{{ $unusedKey }}')" class="loader size-3.5"></span>
                                             <x-ri-link wire:loading.remove wire:target="openReattachModal('{{ $unusedKey }}')" class="size-3.5" />
                                             Reattach
                                         </button>
@@ -503,7 +503,7 @@
                                                 style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(239 68 68 / 0.5); background-color: rgb(239 68 68 / 0.1); color: rgb(239 68 68); transition: background-color 0.15s ease;"
                                                 onmouseover="this.style.backgroundColor='rgb(239 68 68 / 0.2)'"
                                                 onmouseout="this.style.backgroundColor='rgb(239 68 68 / 0.1)'">
-                                            <span wire:loading wire:target="deleteUnusedDrive('{{ $unusedKey }}')" class="size-3.5 border-2 border-current border-r-transparent rounded-full animate-spin"></span>
+                                            <span wire:loading wire:target="deleteUnusedDrive('{{ $unusedKey }}')" class="loader size-3.5"></span>
                                             <x-ri-delete-bin-line wire:loading.remove wire:target="deleteUnusedDrive('{{ $unusedKey }}')" class="size-3.5" />
                                             Delete
                                         </button>
diff --git a/extensions/Servers/Proxmox/views/subdomain.blade.php b/extensions/Servers/Proxmox/views/subdomain.blade.php
index 444f5176f..6f5080bb1 100644
--- a/extensions/Servers/Proxmox/views/subdomain.blade.php
+++ b/extensions/Servers/Proxmox/views/subdomain.blade.php
@@ -156,7 +156,7 @@
                     </div>
                 </div>
                 <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>
+                    <span wire:loading wire:target="$set('showCreateModal', true)" class="loader size-4"></span>
                     <x-ri-add-circle-fill wire:loading.remove wire:target="$set('showCreateModal', true)" class="size-4" />
                     Create Subdomain
                 </x-button.primary>
@@ -257,7 +257,7 @@
                                 </div>
                                 <div class="flex gap-2">
                                     <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>
+                                        <span wire:loading wire:target="openDeleteModal('{{ $zone['subdomain'] }}', {{ $zone['ipAddressId'] }})" class="loader size-4"></span>
                                         <x-ri-delete-bin-line wire:loading.remove wire:target="openDeleteModal('{{ $zone['subdomain'] }}', {{ $zone['ipAddressId'] }})" class="size-4" />
                                         Delete
                                     </x-button.danger>
diff --git a/themes/lucentui/css/app.css b/themes/lucentui/css/app.css
index fd0c98a3a..c8d8f5ee9 100644
--- a/themes/lucentui/css/app.css
+++ b/themes/lucentui/css/app.css
@@ -629,6 +629,46 @@ x-navigation-link svg {
     100% { background-position: -200% 0; }
 }
 
+/* =============================================================================
+   BUTTON LOADING SPINNER
+   ============================================================================= */
+
+.loader {
+    width: 1em;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    border: 2px solid currentColor;
+    animation:
+        loader-clip 0.8s infinite linear alternate,
+        loader-rotate 1.6s infinite linear;
+}
+
+.loader-sm {
+    width: 0.875em;
+}
+
+.loader-lg {
+    width: 1.25em;
+    border-width: 3px;
+}
+
+@keyframes loader-clip {
+    0%    { clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); }
+    12.5% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%); }
+    25%   { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%); }
+    50%   { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%); }
+    62.5% { clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%); }
+    75%   { clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%); }
+    100%  { clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%); }
+}
+
+@keyframes loader-rotate {
+    0%     { transform: scaleY(1) rotate(0deg); }
+    49.99% { transform: scaleY(1) rotate(135deg); }
+    50%    { transform: scaleY(-1) rotate(0deg); }
+    100%   { transform: scaleY(-1) rotate(-135deg); }
+}
+
 /* =============================================================================
    CRITICAL PERFORMANCE FIXES
    ============================================================================= */