From 0bd57e8623ef15daefd9cd1433df49f2b9668fe6 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Fri, 30 Jan 2026 11:15:20 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20clean=20up=20spinner?=
 =?UTF-8?q?=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

remove inline styles for better maintainability
---
 CHANGELOG.md                            |  1 +
 src/frontend/src/primitives/Spinner.tsx | 44 ++++++++++++++++---------
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 53f1c82f..aa47dd4b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to
 
 ### Changed
 
+- ♿️(frontend) improve spinner reduced‑motion fallback #931
 - ♿️(frontend) fix form labels and autocomplete wiring #932
 - 🥅(summary) catch file-related exceptions when handling recording #944
 - 📝(frontend) update legal terms #956
diff --git a/src/frontend/src/primitives/Spinner.tsx b/src/frontend/src/primitives/Spinner.tsx
index ed305721..d921d11a 100644
--- a/src/frontend/src/primitives/Spinner.tsx
+++ b/src/frontend/src/primitives/Spinner.tsx
@@ -1,5 +1,12 @@
 import { ProgressBar } from 'react-aria-components'
-import { css } from '@/styled-system/css'
+import { RiHourglassFill } from '@remixicon/react'
+import { css, cx } from '@/styled-system/css'
+
+const rotatingArcClassName = css({
+  animation: 'rotate 1s ease-in-out infinite',
+  transformOrigin: 'center',
+  transition: 'transform 16ms linear',
+})
 
 export const Spinner = ({
   size = 56,
@@ -44,37 +51,44 @@ export const Spinner = ({
               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}
+              strokeDashoffset={
+                typeof percentage === 'number'
+                  ? c - (percentage / 100) * c
+                  : undefined
+              }
               strokeLinecap="round"
-              className={css({
-                stroke: variant == 'light' ? 'primary.800' : 'white',
-              })}
-              style={{
-                animation: `rotate 1s ease-in-out infinite`,
-                transformOrigin: 'center',
-                transition: 'transform 16ms linear',
-              }}
+              className={cx(
+                rotatingArcClassName,
+                css({
+                  stroke: variant == 'light' ? 'primary.800' : 'white',
+                })
+              )}
             />
           </svg>
           <span
             aria-hidden="true"
             className={css({
               display: 'none',
-              color: variant == 'light' ? 'primary.800' : 'white',
-              fontSize: 'sm',
+              color: 'black',
               '@media (prefers-reduced-motion: reduce)': {
-                display: 'inline',
+                display: 'inline-flex',
               },
             })}
           >
-            ⏳
+            <RiHourglassFill
+              size={Math.max(16, Math.round(size * 0.4))}
+              style={{
+                display: 'block',
+                transform: 'translateY(1px)',
+                color: variant == 'light' ? 'primary.800' : 'white',
+              }}
+            />
           </span>
         </div>
       )}