From 01236ebb3eed4946c82db44d3c60eb699dee8dbc Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Mon, 22 Dec 2025 15:44:18 +0000
Subject: [PATCH] improved loading screen with spinner

---
 packages/frontend/src/Index.tsx                  |  1 +
 .../frontend/src/components/auth-provider.tsx    |  6 +-----
 packages/frontend/src/components/loading.tsx     |  9 +++++++--
 packages/frontend/src/components/ui/spinner.tsx  | 16 ++++++++++++++++
 4 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 packages/frontend/src/components/ui/spinner.tsx

diff --git a/packages/frontend/src/Index.tsx b/packages/frontend/src/Index.tsx
index dc954d4..8000bba 100644
--- a/packages/frontend/src/Index.tsx
+++ b/packages/frontend/src/Index.tsx
@@ -6,6 +6,7 @@ import SmallUserDisplay from "@/components/small-user-display";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { getAuthHeaders } from "@/lib/utils";
 import LogOutButton from "./components/log-out-button";
+import Loading from "./components/loading";
 
 function Index() {
     const serverURL = import.meta.env.VITE_SERVER_URL?.trim() || "http://localhost:3000";
diff --git a/packages/frontend/src/components/auth-provider.tsx b/packages/frontend/src/components/auth-provider.tsx
index f9970ff..5c17bd8 100644
--- a/packages/frontend/src/components/auth-provider.tsx
+++ b/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"} />;
 }
diff --git a/packages/frontend/src/components/loading.tsx b/packages/frontend/src/components/loading.tsx
index cf4b0de..bd039f6 100644
--- a/packages/frontend/src/components/loading.tsx
+++ b/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>
     );
diff --git a/packages/frontend/src/components/ui/spinner.tsx b/packages/frontend/src/components/ui/spinner.tsx
new file mode 100644
index 0000000..e057587
--- /dev/null
+++ b/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 };