improved loading screen with spinner

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

@@ -51,9 +51,5 @@ export function Auth({ children }: AuthProviderProps) {
             </div>
         );
 
-    return (
-        <Loading>
-            <span className="text-xs px-2 py-1 bg-input">Understanding your authentication state</span>
-        </Loading>
-    );
+    return <Loading message={"Understanding your authentication state"} />;
 }

packages/frontend/src/components/loading.tsx

@@ -1,7 +1,12 @@
-export default function Loading({ children }: { children?: React.ReactNode }) {
+import { Spinner } from "@/components/ui/spinner";
+
+export default function Loading({ message, children }: { message?: string; children?: React.ReactNode }) {
     return (
         <div className="flex flex-col items-center justify-center gap-4 w-full h-[100vh]">
-            <h1>Loading...</h1>
+            <Spinner className="size-6" />
+            {message && (
+                <span className="text-xs px-2 py-1 border-2 border-input border-dashed">{message}</span>
+            )}
             {children}
         </div>
     );

packages/frontend/src/components/ui/spinner.tsx

@@ -0,0 +1,16 @@
+import { Loader2Icon, Loader } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+    return (
+        <Loader
+            role="status"
+            aria-label="Loading"
+            className={cn("size-4 animate-spin", className)}
+            {...props}
+        />
+    );
+}
+
+export { Spinner };