loading page

packages/frontend/src/components/auth-provider.tsx

@@ -1,6 +1,7 @@
 import type { UserRecord } from "@issue/shared";
 import { useEffect, useRef, useState } from "react";
-import LogInForm from "./login-form";
+import Loading from "@/components/loading";
+import LogInForm from "@/components/login-form";
 
 type AuthProviderProps = {
     children: React.ReactNode;
@@ -48,5 +49,9 @@ export function Auth({ children }: AuthProviderProps) {
             </div>
         );
 
-    return <>loading...</>;
+    return (
+        <Loading>
+            <span className="text-xs px-2 py-1 bg-input">Understanding your authentication state</span>
+        </Loading>
+    );
 }

packages/frontend/src/components/loading.tsx

@@ -0,0 +1,8 @@
+export default function Loading({ children }: { children?: React.ReactNode }) {
+    return (
+        <div className="flex flex-col items-center justify-center gap-4 w-full h-[100vh]">
+            <h1>Loading...</h1>
+            {children}
+        </div>
+    );
+}