Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

Profile: add loading indicator for toot list

Browse source
This commit is contained in:
thislight 2024-10-28 13:56:04 +08:00
parent 66bded813d
commit d1c073e33e
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
1 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/profiles/Profile.tsx
View file

@ -13,6 +13,7 @@ import {
AppBar, AppBar,
Avatar, Avatar,
Button, Button,
CircularProgress,
Divider, Divider,
IconButton, IconButton,
ListItemIcon, ListItemIcon,
@ -102,7 +103,7 @@ const Profile: Component = () => {
const avatarImg = () => profile()?.avatar; const avatarImg = () => profile()?.avatar;
const displayName = () => const displayName = () =>
resolveCustomEmoji(profile()?.displayName || "", profile()?.emojis ?? []); resolveCustomEmoji(profile()?.displayName || "", profile()?.emojis ?? []);
const fullUsername = () => `@${profile()?.acct ?? ""}`; // TODO: full user name const fullUsername = () => (profile()?.acct ? `@${profile()!.acct!}` : ""); // TODO: full user name
const description = () => profile()?.note; const description = () => profile()?.note;
css` css`
@ -231,7 +232,12 @@ const Profile: Component = () => {
<ListItemText>Mention {profile()?.displayName || ""}...</ListItemText> <ListItemText>Mention {profile()?.displayName || ""}...</ListItemText>
</MenuItem> </MenuItem>
<Divider /> <Divider />
<MenuItem component={"a"} href={profile()?.url} target="_blank" rel="noopener noreferrer"> <MenuItem
component={"a"}
href={profile()?.url}
target="_blank"
rel="noopener noreferrer"
>
<ListItemIcon> <ListItemIcon>
<OpenInBrowser /> <OpenInBrowser />
</ListItemIcon> </ListItemIcon>
@ -307,6 +313,7 @@ const Profile: Component = () => {
createRenderEffect(() => (e.innerHTML = description() || "")) createRenderEffect(() => (e.innerHTML = description() || ""))
} }
></div> ></div>
<table class="acct-fields"> <table class="acct-fields">
<tbody> <tbody>
<For each={profile()?.fields ?? []}> <For each={profile()?.fields ?? []}>
@ -365,8 +372,11 @@ const Profile: Component = () => {
size="large" size="large"
color="primary" color="primary"
onClick={[refetchRecentToots, "prev"]} onClick={[refetchRecentToots, "prev"]}
disabled={recentTootChunk.loading}
> >
<ExpandMore /> <Show when={recentTootChunk.loading} fallback={<ExpandMore />}>
<CircularProgress sx={{ width: "24px", height: "24px" }} />
</Show>
</IconButton> </IconButton>
</div> </div>
</Show> </Show>