From ae099e2d1cca47cec4cbf159b857edc9cc32b1f7 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Fri, 17 Apr 2026 00:23:59 +0200
Subject: [PATCH] fix: perfectly centered loading animation with icon

---
 src/styles/animations.css   | 28 ++++++++++++++++++++++++++++
 src/styles/diffuse/page.css |  5 -----
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/styles/animations.css b/src/styles/animations.css
index c6379963..eb02c3ca 100644
--- a/src/styles/animations.css
+++ b/src/styles/animations.css
@@ -5,10 +5,38 @@
   --animate-bounce: bounce 1s infinite;
 }
 
+/* Default: animate the element itself */
 .animate-spin {
   animation: var(--animate-spin);
+  display: inline-block;
 }
 
+/* When animate-spin is directly on a Phosphor <i>, animate ::before instead */
+i[class^="ph-"].animate-spin {
+  animation: none;
+}
+
+i[class^="ph-"].animate-spin::before {
+  display: inline-block;
+  animation: var(--animate-spin);
+  line-height: 0;
+  transform-origin: center;
+}
+
+/* When animate-spin is on a parent of a Phosphor <i>,
+   don't rotate the parent — rotate the icon's ::before instead */
+.animate-spin:has(> i[class^="ph-"]) {
+  animation: none;
+}
+
+.animate-spin > i[class^="ph-"]::before {
+  display: inline-block;
+  animation: var(--animate-spin);
+  line-height: 0;
+  transform-origin: center;
+}
+
+
 .animate-ping {
   animation: var(--animate-ping);
 }
diff --git a/src/styles/diffuse/page.css b/src/styles/diffuse/page.css
index bae0670b..6b78af9f 100644
--- a/src/styles/diffuse/page.css
+++ b/src/styles/diffuse/page.css
@@ -916,11 +916,6 @@ nav {
     opacity: 0;
     pointer-events: none;
   }
-
-  .ph-spinner {
-    position: relative;
-    top: 1px;
-  }
 }
 
 /**
-- 
2.51.2