Porning/app
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added feedback to the user that their profile is loading

Browse Source
This commit is contained in:
AINDUSTRIES
2026-07-22 20:49:18 -04:00
parent c6b6d316cf
commit 852331f909
1 changed files with 43 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
app/components/user.tsx
View File

@@ -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();
}
}
}