From 30fcf527d025de3a5cb771b02832cfa9677759a3 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 4 Dec 2025 23:00:58 -0500
Subject: [PATCH] feat: enhance refresh button with loading animation for
 improved user experience

---
 .../Servers/Proxmox/views/firewall.blade.php   | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/firewall.blade.php b/extensions/Servers/Proxmox/views/firewall.blade.php
index 7b7b2283e..436244ef5 100644
--- a/extensions/Servers/Proxmox/views/firewall.blade.php
+++ b/extensions/Servers/Proxmox/views/firewall.blade.php
@@ -1126,18 +1126,28 @@
                                                             <div class="absolute top-4 right-4 flex items-center gap-2 z-10">
                                                                 <button @click="loadConnectionData()" 
                                                                         :disabled="loading"
-                                                                        class="text-base/50 hover:text-primary transition-colors bg-background/80 backdrop-blur-sm rounded-full p-2 hover:bg-background disabled:opacity-50 disabled:cursor-not-allowed"
+                                                                        class="w-9 h-9 flex items-center justify-center text-base/50 hover:text-primary transition-colors bg-background/80 backdrop-blur-sm rounded-full hover:bg-background disabled:opacity-50 disabled:cursor-not-allowed"
                                                                         title="Refresh data">
-                                                                    <span :class="loading ? 'animate-spin' : ''" class="inline-block">
+                                                                    <template x-if="!loading">
                                                                         <x-ri-refresh-line class="size-5" />
-                                                                    </span>
+                                                                    </template>
+                                                                    <template x-if="loading">
+                                                                        <div class="w-5 h-5 rounded-full p-[3px] text-primary"
+                                                                             style="background: conic-gradient(from 135deg at top, currentColor 90deg, transparent 0) 0 calc(50% - 2px)/8.5px 4.25px, radial-gradient(farthest-side at bottom left, transparent calc(100% - 3px), currentColor calc(100% - 2px) 99%, transparent) top right/50% 50% content-box content-box, radial-gradient(farthest-side at top, transparent calc(100% - 3px), currentColor calc(100% - 2px) 99%, transparent) bottom/100% 50% content-box content-box; background-repeat: no-repeat; animation: refreshSpin 1s infinite linear;"></div>
+                                                                    </template>
                                                                 </button>
                                                                 <button @click="open = false" 
-                                                                        class="text-base/50 hover:text-base transition-colors bg-background/80 backdrop-blur-sm rounded-full p-2 hover:bg-background">
+                                                                        class="w-9 h-9 flex items-center justify-center text-base/50 hover:text-base transition-colors bg-background/80 backdrop-blur-sm rounded-full hover:bg-background">
                                                                     <x-ri-close-line class="size-5" />
                                                                 </button>
                                                             </div>
                                                             
+                                                            <style>
+                                                                @keyframes refreshSpin { 
+                                                                    100% { transform: rotate(1turn); }
+                                                                }
+                                                            </style>
+                                                            
                                                             {{-- Modal Header --}}
                                                             <div class="bg-gradient-to-r from-primary/10 to-secondary/10 border-b border-primary/20 p-6">
                                                                 <div class="flex items-center gap-3">