From ea37a3154e0b69f196d26acfd22bf55db03261d8 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 21 Feb 2025 23:32:36 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7(frontend)=20add=20basic=20loading?=
 =?UTF-8?q?=20spinner=20from=20react-aria?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add raw loading spinner component from react-aria library to handle
loading states. Will refine styling and appearance after receiving design
review feedback.
---
 .../src/features/rooms/components/Join.tsx    |  3 +-
 src/frontend/src/primitives/Spinner.tsx       | 60 +++++++++++++++++++
 2 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/src/primitives/Spinner.tsx

diff --git a/src/frontend/src/features/rooms/components/Join.tsx b/src/frontend/src/features/rooms/components/Join.tsx
index a4c2a5ed..0be946ec 100644
--- a/src/frontend/src/features/rooms/components/Join.tsx
+++ b/src/frontend/src/features/rooms/components/Join.tsx
@@ -25,6 +25,7 @@ import { useLobby } from '../hooks/useLobby'
 import { useQuery } from '@tanstack/react-query'
 import { queryClient } from '@/api/queryClient'
 import { ApiLobbyStatus, ApiRequestEntry } from '../api/requestEntry'
+import { Spinner } from '@/primitives/Spinner'
 
 const onError = (e: Error) => console.error('ERROR', e)
 
@@ -313,7 +314,7 @@ export const Join = ({
               {t('waiting.title')}
             </H>
             <P>{t('waiting.body')}</P>
-            <p>[Loading spinner]</p>
+            <Spinner />
           </VStack>
         )
 
diff --git a/src/frontend/src/primitives/Spinner.tsx b/src/frontend/src/primitives/Spinner.tsx
new file mode 100644
index 00000000..dc08bd94
--- /dev/null
+++ b/src/frontend/src/primitives/Spinner.tsx
@@ -0,0 +1,60 @@
+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 c = 2 * r * Math.PI
+  return (
+    <ProgressBar aria-label="Loading…" value={75}>
+      {({ percentage }) => (
+        <>
+          <svg
+            width={64}
+            height={64}
+            viewBox="0 0 32 32"
+            fill="none"
+            strokeWidth={strokeWidth}
+          >
+            <circle
+              cx={center}
+              cy={center}
+              r={r - (strokeWidth / 2 - 0.25)}
+              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,
+              })}
+            />
+            <circle
+              cx={center}
+              cy={center}
+              r={r}
+              strokeDasharray={`${c} ${c}`}
+              strokeDashoffset={percentage && c - (percentage / 100) * c}
+              strokeLinecap="round"
+              className={css({
+                stroke: 'primary.900',
+              })}
+              style={{
+                animation: `rotate 1s linear infinite`,
+                transformOrigin: 'center',
+                transition: 'transform 16ms linear',
+              }}
+            />
+          </svg>
+        </>
+      )}
+    </ProgressBar>
+  )
+}