diff --git a/apps/frontend/src/components/Loader.tsx b/apps/frontend/src/components/Loader.tsx index 3e748f30..c53ca44e 100644 --- a/apps/frontend/src/components/Loader.tsx +++ b/apps/frontend/src/components/Loader.tsx @@ -1,4 +1,42 @@ -//TODO: Make prettier export const Loader = () => { - return
Loading..
; + const svgStyle: React.CSSProperties = { + shapeRendering: 'geometricPrecision', + textRendering: 'geometricPrecision', + imageRendering: 'auto', + fillRule: 'evenodd', + clipRule: 'evenodd', + }; + + const pathStyle: React.CSSProperties = { + fill: '#ffffff', + fillRule: 'nonzero', + }; + + return ( +
+
+ + + + +
+
Loading
+
+
+
+
+
+
+
+
+ ); }; diff --git a/apps/frontend/src/screens/Game.tsx b/apps/frontend/src/screens/Game.tsx index 0c79c64f..ab64478b 100644 --- a/apps/frontend/src/screens/Game.tsx +++ b/apps/frontend/src/screens/Game.tsx @@ -10,6 +10,7 @@ import { useNavigate, useParams } from 'react-router-dom'; import MovesTable from '../components/MovesTable'; import { useUser } from '@repo/store/useUser'; import { UserAvatar } from '../components/UserAvatar'; +import { Loader } from '../components/Loader'; // TODO: Move together, there's code repetition here export const INIT_GAME = 'init_game'; @@ -134,7 +135,12 @@ export const Game = () => { } }, [chess, socket]); - if (!socket) return
Connecting...
; + if (!socket) + return ( +
+ +
+ ); return (