Added feedback to the user that their profile is loading

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>;
@@ -17,12 +34,18 @@ export default function User() {
                 </Avatar>
             </Button>
             <Dropdown.Popover>
-            <Dropdown.Menu onAction={(key) => handleAction(String(key), logout)}>
+                <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">
+                    <Dropdown.Item
+                        id="logout"
+                        textValue="Logout"
+                        variant="danger"
+                    >
                         <Label>Logout</Label>
                     </Dropdown.Item>
                 </Dropdown.Menu>