From 27f2023104976d62f3f0c074ec10d0313f742748 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Fri, 30 Jan 2026 10:54:17 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20add=20reduced-mo?=
 =?UTF-8?q?tion=20spinner=20fallback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

show an hourglass when animations are reduced
---
 src/frontend/src/primitives/Spinner.tsx | 90 ++++++++++++++++---------
 1 file changed, 58 insertions(+), 32 deletions(-)

diff --git a/src/frontend/src/primitives/Spinner.tsx b/src/frontend/src/primitives/Spinner.tsx
index fb8b8344..ed305721 100644
--- a/src/frontend/src/primitives/Spinner.tsx
+++ b/src/frontend/src/primitives/Spinner.tsx
@@ -13,44 +13,70 @@ export const Spinner = ({
   const r = 14 - strokeWidth
   const c = 2 * r * Math.PI
   return (
-    <ProgressBar aria-label="Loading…" value={30}>
+    <ProgressBar aria-label="Loading..." value={30}>
       {({ percentage }) => (
-        <svg
-          width={size}
-          height={size}
-          viewBox="0 0 28 28"
-          fill="none"
-          strokeWidth={strokeWidth}
+        <div
+          className={css({
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          })}
         >
-          <circle
-            cx={center}
-            cy={center}
-            r={r}
-            strokeDasharray={0}
-            strokeDashoffset={0}
-            strokeLinecap="round"
+          <svg
+            width={size}
+            height={size}
+            viewBox="0 0 28 28"
+            fill="none"
+            strokeWidth={strokeWidth}
             className={css({
-              stroke: variant == 'light' ? 'primary.100' : 'transparent',
+              '@media (prefers-reduced-motion: reduce)': {
+                display: 'none',
+              },
             })}
-            style={{}}
-          />
-          <circle
-            cx={center}
-            cy={center}
-            r={r}
-            strokeDasharray={`${c} ${c}`}
-            strokeDashoffset={percentage && c - (percentage / 100) * c}
-            strokeLinecap="round"
+          >
+            <circle
+              cx={center}
+              cy={center}
+              r={r}
+              strokeDasharray={0}
+              strokeDashoffset={0}
+              strokeLinecap="round"
+              className={css({
+                stroke: variant == 'light' ? 'primary.100' : 'transparent',
+              })}
+              style={{}}
+            />
+            <circle
+              cx={center}
+              cy={center}
+              r={r}
+              strokeDasharray={`${c} ${c}`}
+              strokeDashoffset={percentage && c - (percentage / 100) * c}
+              strokeLinecap="round"
+              className={css({
+                stroke: variant == 'light' ? 'primary.800' : 'white',
+              })}
+              style={{
+                animation: `rotate 1s ease-in-out infinite`,
+                transformOrigin: 'center',
+                transition: 'transform 16ms linear',
+              }}
+            />
+          </svg>
+          <span
+            aria-hidden="true"
             className={css({
-              stroke: variant == 'light' ? 'primary.800' : 'white',
+              display: 'none',
+              color: variant == 'light' ? 'primary.800' : 'white',
+              fontSize: 'sm',
+              '@media (prefers-reduced-motion: reduce)': {
+                display: 'inline',
+              },
             })}
-            style={{
-              animation: `rotate 1s ease-in-out infinite`,
-              transformOrigin: 'center',
-              transition: 'transform 16ms linear',
-            }}
-          />
-        </svg>
+          >
+            ⏳
+          </span>
+        </div>
       )}
     </ProgressBar>
   )