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

61
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"; import { useAuth } from "~/hooks/auth";
export default function User() { 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) { if (user === null) {
return <Button onClick={() => login()}>Login</Button>; return <Button onClick={() => login()}>Login</Button>;
@@ -10,23 +27,29 @@ export default function User() {
return ( return (
<Dropdown> <Dropdown>
<Button className="pr-0"> <Button className="pr-0">
<Typography.Paragraph>{user.name}</Typography.Paragraph> <Typography.Paragraph>{user.name}</Typography.Paragraph>
<Avatar> <Avatar>
<Avatar.Image alt="Avatar" src={user.avatar}></Avatar.Image> <Avatar.Image alt="Avatar" src={user.avatar}></Avatar.Image>
</Avatar> </Avatar>
</Button> </Button>
<Dropdown.Popover > <Dropdown.Popover>
<Dropdown.Menu onAction={(key) => handleAction(String(key), logout)}> <Dropdown.Menu
<Dropdown.Item id="settings" textValue="Settings"> onAction={(key) => handleAction(String(key), logout)}
<Label>Settings</Label> >
</Dropdown.Item> <Dropdown.Item id="settings" textValue="Settings">
<Separator variant="tertiary"/> <Label>Settings</Label>
<Dropdown.Item id="logout" textValue="Logout" variant="danger"> </Dropdown.Item>
<Label>Logout</Label> <Separator variant="tertiary" />
</Dropdown.Item> <Dropdown.Item
</Dropdown.Menu> id="logout"
</Dropdown.Popover> textValue="Logout"
variant="danger"
>
<Label>Logout</Label>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown.Popover>
</Dropdown> </Dropdown>
); );
} }