chore/ui: minimise layout shift for auth check

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

frontend/src/components/blocks/root-layout.tsx

@@ -1,9 +1,36 @@
+import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
 
+import { AuthStoreProvider } from '@/stores/auth-store';
+
+import NavBar from './nav-bar';
+
 export function RootLayout() {
+  const [userId, setUserId] = useState('');
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [isAdmin, setIsAdmin] = useState(false);
   return (
     <div className='text-text bg-background flex min-h-screen flex-col overscroll-contain'>
-      <Outlet />
+      <AuthStoreProvider
+        value={{
+          ...{
+            userId,
+            setUserId,
+            email,
+            setEmail,
+            username,
+            setUsername,
+            isAdmin,
+            setIsAdmin,
+          },
+        }}
+      >
+        <NavBar />
+        <main className='flex flex-1'>
+          <Outlet />
+        </main>
+      </AuthStoreProvider>
     </div>
   );
 }

frontend/src/components/blocks/route-guard.tsx

@@ -11,10 +11,9 @@ import {
 
 import { ROUTES, UNAUTHED_ROUTES } from '@/lib/routes';
 import { checkIsAuthed } from '@/services/user-service';
-import { AuthStoreProvider } from '@/stores/auth-store';
+import { useAuthedRoute } from '@/stores/auth-store';
 
 import { Loading } from './loading';
-import NavBar from './nav-bar';
 
 export const loader =
   (queryClient: QueryClient) =>
@@ -50,26 +49,33 @@ export const RouteGuard = () => {
       <Await resolve={data.payload}>
         {({ authedPayload, isAuthedRoute, path: _p }) => {
           const [isLoading, setIsLoading] = useState(true);
+          const hooks = useAuthedRoute();
           useEffect(() => {
             if (authedPayload.isAuthed !== isAuthedRoute) {
               navigate(isAuthedRoute ? ROUTES.LOGIN : ROUTES.HOME);
             }
 
+            const { isAdmin, email, username, userId } = authedPayload;
+
+            if (isAdmin && hooks.setIsAdmin) {
+              hooks.setIsAdmin(true);
+            }
+
+            if (email && hooks.setEmail) {
+              hooks.setEmail(email);
+            }
+
+            if (username && hooks.setUsername) {
+              hooks.setUsername(username);
+            }
+
+            if (userId && hooks.setUserId) {
+              hooks.setUserId(userId);
+            }
+
             setIsLoading(false);
           }, [authedPayload]);
-          return (
-            <AuthStoreProvider
-              value={{
-                userId: authedPayload.userId ?? '',
-                username: authedPayload.username ?? '',
-                email: authedPayload.email ?? '',
-                isAdmin: authedPayload.isAdmin ?? undefined,
-              }}
-            >
-              <NavBar />
-              <main className='flex flex-1'>{isLoading ? <Loading /> : <Outlet />}</main>
-            </AuthStoreProvider>
-          );
+          return isLoading ? <Loading /> : <Outlet />;
         }}
       </Await>
     </Suspense>

frontend/src/stores/auth-store.ts

@@ -1,10 +1,14 @@
-import { createContext, useContext } from 'react';
+import { createContext, type Dispatch, type SetStateAction, useContext } from 'react';
 
 type AuthStoreType = {
   userId: string;
+  setUserId?: Dispatch<SetStateAction<string>>;
   username: string;
+  setUsername?: Dispatch<SetStateAction<string>>;
   email: string;
+  setEmail?: Dispatch<SetStateAction<string>>;
   isAdmin?: boolean;
+  setIsAdmin?: Dispatch<SetStateAction<boolean>>;
 };
 
 const AuthStore = createContext<AuthStoreType>({