From 3e9992bae36c1bfe49e1244ccbbe6a1708877df1 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 4 Mar 2025 20:36:55 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20adapt=20loading=20spin?=
 =?UTF-8?q?ner=20to=20match=20Robin's=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update loading spinner component to follow Robin's design specifications,
ensuring visual consistency with the established design system.
---
 src/frontend/src/primitives/Spinner.tsx | 37 ++++++++++---------------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/primitives/Spinner.tsx b/src/frontend/src/primitives/Spinner.tsx
index dc08bd94..dc83836f 100644
--- a/src/frontend/src/primitives/Spinner.tsx
+++ b/src/frontend/src/primitives/Spinner.tsx
@@ -1,40 +1,33 @@
 import { ProgressBar } from 'react-aria-components'
 import { css } from '@/styled-system/css'
 
-// FIXME - this component will be style after the designer review
 export const Spinner = () => {
-  const center = 16
-  const strokeWidth = 4
-  const r = 16 - strokeWidth
+  const center = 14
+  const strokeWidth = 3
+  const r = 14 - strokeWidth
   const c = 2 * r * Math.PI
   return (
-    <ProgressBar aria-label="Loading…" value={75}>
+    <ProgressBar aria-label="Loading…" value={30}>
       {({ percentage }) => (
         <>
           <svg
-            width={64}
-            height={64}
-            viewBox="0 0 32 32"
+            width={56}
+            height={56}
+            viewBox="0 0 28 28"
             fill="none"
             strokeWidth={strokeWidth}
           >
             <circle
               cx={center}
               cy={center}
-              r={r - (strokeWidth / 2 - 0.25)}
+              r={r}
+              strokeDasharray={0}
+              strokeDashoffset={0}
+              strokeLinecap="round"
               className={css({
-                stroke: 'primary.300',
-                strokeWidth: 0.5,
-              })}
-            />
-            <circle
-              cx={center}
-              cy={center}
-              r={r + (strokeWidth / 2 - 0.25)}
-              className={css({
-                stroke: 'primary.300',
-                strokeWidth: 0.5,
+                stroke: 'primary.100',
               })}
+              style={{}}
             />
             <circle
               cx={center}
@@ -44,10 +37,10 @@ export const Spinner = () => {
               strokeDashoffset={percentage && c - (percentage / 100) * c}
               strokeLinecap="round"
               className={css({
-                stroke: 'primary.900',
+                stroke: 'primary.800',
               })}
               style={{
-                animation: `rotate 1s linear infinite`,
+                animation: `rotate 1s ease-in-out infinite`,
                 transformOrigin: 'center',
                 transition: 'transform 16ms linear',
               }}