From 3f511cefa8aeba2417c70f2a3f3204aada05d402 Mon Sep 17 00:00:00 2001
From: ChiaraBm <chiara.bm04@gmail.com>
Date: Mon, 24 Mar 2025 21:20:21 +0100
Subject: [PATCH] Updated loader style so the table loader is working again

---
 Moonlight.Client/Styles/additions/loaders.css | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/Moonlight.Client/Styles/additions/loaders.css b/Moonlight.Client/Styles/additions/loaders.css
index dd5327b1..3c40c729 100644
--- a/Moonlight.Client/Styles/additions/loaders.css
+++ b/Moonlight.Client/Styles/additions/loaders.css
@@ -1,19 +1,28 @@
-.loader {
-    width: 42px;
-    height: 42px;
-    border: 3px solid #FFF;
-    border-bottom-color: transparent;
+.loader-spinner {
+    width: 2.5rem;
+    height: 2.5rem;
     border-radius: 50%;
-    display: inline-block;
+    position: relative;
+    animation: loader-spinner-rotate 1s linear infinite
+}
+.loader-spinner::before {
+    content: "";
     box-sizing: border-box;
-    animation: loader-rotation 1s linear infinite;
+    position: absolute;
+    inset: 0px;
+    border-radius: 50%;
+    border: 3px solid #FFF;
+    animation: loader-spinner-prixClipFix 2s linear infinite ;
 }
 
-@keyframes loader-rotation {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-} 
\ No newline at end of file
+@keyframes loader-spinner-rotate {
+    100%   {transform: rotate(360deg)}
+}
+
+@keyframes loader-spinner-prixClipFix {
+    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
+    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
+    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
+    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
+    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
+}
\ No newline at end of file