diff --git a/app/components/user.tsx b/app/components/user.tsx
index 2a68017..07b8f3b 100644
--- a/app/components/user.tsx
+++ b/app/components/user.tsx
@@ -1,8 +1,25 @@
-import { Button, Avatar, Typography, Dropdown, Label, Separator } from "@heroui/react";
+import {
+    Button,
+    Avatar,
+    Typography,
+    Dropdown,
+    Label,
+    Separator,
+    Spinner,
+} from "@heroui/react";
 import { useAuth } from "~/hooks/auth";
 
 export default function User() {
-    const {user, login, logout} = useAuth();
+    const { user, loading, login, logout } = useAuth();
+
+    if (loading) {
+        return (
+            <Button isPending={true}>
+                <Spinner color="current" size="md" />
+                Loading...
+            </Button>
+        );
+    }
 
     if (user === null) {
         return <Button onClick={() => login()}>Login</Button>;
@@ -10,23 +27,29 @@ export default function User() {
 
     return (
         <Dropdown>
-        <Button className="pr-0">
-            <Typography.Paragraph>{user.name}</Typography.Paragraph>
-            <Avatar>
-                <Avatar.Image alt="Avatar" src={user.avatar}></Avatar.Image>
-            </Avatar>
-        </Button>
-        <Dropdown.Popover >
-            <Dropdown.Menu onAction={(key) => handleAction(String(key), logout)}>
-                <Dropdown.Item id="settings" textValue="Settings">
-                    <Label>Settings</Label>
-                </Dropdown.Item>
-                <Separator variant="tertiary"/>
-                <Dropdown.Item id="logout" textValue="Logout" variant="danger">
-                    <Label>Logout</Label>
-                </Dropdown.Item>
-            </Dropdown.Menu>
-        </Dropdown.Popover>
+            <Button className="pr-0">
+                <Typography.Paragraph>{user.name}</Typography.Paragraph>
+                <Avatar>
+                    <Avatar.Image alt="Avatar" src={user.avatar}></Avatar.Image>
+                </Avatar>
+            </Button>
+            <Dropdown.Popover>
+                <Dropdown.Menu
+                    onAction={(key) => handleAction(String(key), logout)}
+                >
+                    <Dropdown.Item id="settings" textValue="Settings">
+                        <Label>Settings</Label>
+                    </Dropdown.Item>
+                    <Separator variant="tertiary" />
+                    <Dropdown.Item
+                        id="logout"
+                        textValue="Logout"
+                        variant="danger"
+                    >
+                        <Label>Logout</Label>
+                    </Dropdown.Item>
+                </Dropdown.Menu>
+            </Dropdown.Popover>
         </Dropdown>
     );
 }
@@ -37,4 +60,4 @@ function handleAction(key: string, logout: () => Promise<void>) {
     } else {
         logout();
     }
-}
\ No newline at end of file
+}