🚧(frontend) add basic loading spinner from react-aria

Add raw loading spinner component from react-aria library to handle
loading states. Will refine styling and appearance after receiving design
review feedback.

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>
         )
 

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>
+  )
+}