From 97b1d51734babdb6a63b5adea7af10b41cc3dc32 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sat, 24 Jan 2026 21:26:04 -0500
Subject: [PATCH] style: use 5582262.png image for loader instead of CSS
 animation

---
 themes/lucentui/css/app.css | 33 +++++++++------------------------
 1 file changed, 9 insertions(+), 24 deletions(-)

diff --git a/themes/lucentui/css/app.css b/themes/lucentui/css/app.css
index 0c72d4897..7324cc1da 100644
--- a/themes/lucentui/css/app.css
+++ b/themes/lucentui/css/app.css
@@ -636,43 +636,28 @@ x-navigation-link svg {
 .loader {
     display: inline-block;
     width: 1em;
-    aspect-ratio: 1;
-    border-radius: 50%;
-    border: 2px solid var(--primary, #514b82);
-    animation:
-        l20-1 0.8s infinite linear alternate,
-        l20-2 1.6s infinite linear;
+    height: 1em;
+    background: url('/themes/lucentui/5582262.png') no-repeat center/contain;
+    animation: loader-spin 1s linear infinite;
 }
 
-/* Use currentColor variant when inside colored buttons */
+/* Use filter to match button text color when inside colored buttons */
 .loader-inherit {
-    border-color: currentColor;
+    filter: brightness(0) invert(1);
 }
 
 .loader-sm {
     width: 0.875em;
+    height: 0.875em;
 }
 
 .loader-lg {
     width: 1.25em;
-    border-width: 3px;
+    height: 1.25em;
 }
 
-@keyframes l20-1 {
-    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 l20-2 {
-    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); }
+@keyframes loader-spin {
+    to { transform: rotate(360deg); }
 }
 
 /* =============================================================================