Fixed a few bugs

src/components/app/AppLayout.tsx

@@ -13,6 +13,7 @@ import SidebarServers from "./SidebarServers";
 import SidebarDMs from "./SidebarDMs";
 import SidebarChannels from "./SidebarChannels";
 import DMItem from "./DMItem";
+import { useEffectOnceWhenReady } from "@/hooks/use-once";
 
 export default function AppLayout({
   children,
@@ -28,36 +29,42 @@ export default function AppLayout({
   const router = useRouter();
   const isMobile = useIsMobile();
 
-  useEffect(() => {
-    if (!app.profile?.node_address) return;
+  useEffectOnceWhenReady(
+    () => {
+      if (!app.profile?.node_address) return;
 
-    auth({
-      id: app.profile.node_address,
-      wsRef: app.node,
-      onNewMessage: (m) => {
-        if (m.from !== chatWith && m.from !== app.profile?.id)
-          toast(
-            `New message from ${app.profiles[m.from]?.display_name || m.from}`,
-            {
-              description: m.contents.slice(0, 80),
-              action: {
-                label: "View",
-                onClick: () => router.push(`/chat/${m.from}`),
-              },
-              position: "top-right",
-            }
-          );
+      auth({
+        id: app.profile.node_address,
+        wsRef: app.node,
+        onNewMessage: (m) => {
+          if (m.from !== chatWith && m.from !== app.profile?.id)
+            toast(
+              `New message from ${
+                app.profiles[m.from]?.display_name || m.from
+              }`,
+              {
+                description: m.contents.slice(0, 80),
+                action: {
+                  label: "View",
+                  onClick: () => router.push(`/chat/${m.from}`),
+                },
+                position: "top-right",
+              }
+            );
 
-        if (onNewMessage) onNewMessage(m);
-      },
-      messageStore: app.privateMessages,
-    });
+          if (onNewMessage) onNewMessage(m);
+        },
+        messageStore: app.privateMessages,
+      });
 
-    app.setProfiles((prev) => {
-      if (app.profile) prev[app.profile.id] = app.profile;
-      return prev;
-    });
-  }, [chatWith, app.profile]);
+      app.setProfiles((prev) => {
+        if (app.profile) prev[app.profile.id] = app.profile;
+        return prev;
+      });
+    },
+    [chatWith, app.profile],
+    [undefined, undefined]
+  );
 
   return (
     <div className="flex h-svh md:h-screen">

src/components/channel/MessageBox.tsx

@@ -27,6 +27,7 @@ import {
 } from "@/components/ui/context-menu";
 import { ClientMessage, IndicatorContext } from "@/types/protocol";
 import { AnimatePresence, motion } from "framer-motion";
+import AsyncValue from "../AsyncValue";
 
 function MessageContainer({
   message,
@@ -429,13 +430,20 @@ export default function MessageBox({
                 exit={{ opacity: 0, y: -10 }}
                 transition={{ duration: 0.3 }}
               >
-                {indicators
-                  .map(
-                    (indicator) =>
-                      app.profiles[indicator.indicator.params.user_id]
-                        ?.display_name ?? null
-                  )
-                  .join(", ")}
+                <AsyncValue
+                  func={async () =>
+                    await Promise.all(
+                      indicators.map((indicator) =>
+                        app.getUserById(indicator.indicator.params.user_id)
+                      )
+                    )
+                  }
+                  render={({ value: indicators }) =>
+                    indicators
+                      ?.map((indicator) => indicator?.display_name)
+                      .join(", ")
+                  }
+                />
                 {indicators.length > 0 && " is typing"}
               </motion.div>
             )}