Profile: add loading indicator for toot list

src/profiles/Profile.tsx

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