Fixed a few bugs

src/app/chat/[id]/page.tsx

@@ -9,6 +9,7 @@ import auth from "@/lib/auth";
 import useAsync from "@/hooks/use-async";
 import { Button } from "@/components/ui/button";
 import useIndicators from "@/hooks/use-indicators";
+import { useEffectOnceWhenReady } from "@/hooks/use-once";
 
 export default function DMs() {
   const { id } = useParams<{ id: string }>();
@@ -18,25 +19,29 @@ export default function DMs() {
   const router = useRouter();
   const { indicators, addIndicator } = useIndicators();
 
-  useEffect(() => {
+  useEffectOnceWhenReady(
-    async function connectTargetNode() {
+    () => {
-      if (!target) return;
+      async function connectTargetNode() {
-      auth({
+        if (!target) return;
-        id: target.node_address,
+        auth({
-        wsRef: targetNode,
+          id: target.node_address,
-        messageStore: app.privateMessages,
+          wsRef: targetNode,
-        onIndicator: addIndicator,
+          messageStore: app.privateMessages,
+          onIndicator: addIndicator,
+        });
+      }
+
+      connectTargetNode();
+
+      app.setCurrentChannel({
+        id: id,
+        name: target?.display_name || id,
+        kind: "text",
       });
-    }
+    },
-
+    [target],
-    connectTargetNode();
+    [(v) => v]
-
+  );
-    app.setCurrentChannel({
-      id: id,
-      name: target?.display_name || id,
-      kind: "text",
-    });
-  }, [target]);
 
   return loading || target ? (
     <AppLayout app={app}>

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(() => {
+  useEffectOnceWhenReady(
-    if (!app.profile?.node_address) return;
+    () => {
+      if (!app.profile?.node_address) return;
 
-    auth({
+      auth({
-      id: app.profile.node_address,
+        id: app.profile.node_address,
-      wsRef: app.node,
+        wsRef: app.node,
-      onNewMessage: (m) => {
+        onNewMessage: (m) => {
-        if (m.from !== chatWith && m.from !== app.profile?.id)
+          if (m.from !== chatWith && m.from !== app.profile?.id)
-          toast(
+            toast(
-            `New message from ${app.profiles[m.from]?.display_name || m.from}`,
+              `New message from ${
-            {
+                app.profiles[m.from]?.display_name || m.from
-              description: m.contents.slice(0, 80),
+              }`,
-              action: {
+              {
-                label: "View",
+                description: m.contents.slice(0, 80),
-                onClick: () => router.push(`/chat/${m.from}`),
+                action: {
-              },
+                  label: "View",
-              position: "top-right",
+                  onClick: () => router.push(`/chat/${m.from}`),
-            }
+                },
-          );
+                position: "top-right",
+              }
+            );
 
-        if (onNewMessage) onNewMessage(m);
+          if (onNewMessage) onNewMessage(m);
-      },
+        },
-      messageStore: app.privateMessages,
+        messageStore: app.privateMessages,
-    });
+      });
 
-    app.setProfiles((prev) => {
+      app.setProfiles((prev) => {
-      if (app.profile) prev[app.profile.id] = app.profile;
+        if (app.profile) prev[app.profile.id] = app.profile;
-      return prev;
+        return prev;
-    });
+      });
-  }, [chatWith, app.profile]);
+    },
+    [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
+                <AsyncValue
-                  .map(
+                  func={async () =>
-                    (indicator) =>
+                    await Promise.all(
-                      app.profiles[indicator.indicator.params.user_id]
+                      indicators.map((indicator) =>
-                        ?.display_name ?? null
+                        app.getUserById(indicator.indicator.params.user_id)
-                  )
+                      )
-                  .join(", ")}
+                    )
+                  }
+                  render={({ value: indicators }) =>
+                    indicators
+                      ?.map((indicator) => indicator?.display_name)
+                      .join(", ")
+                  }
+                />
                 {indicators.length > 0 && " is typing"}
               </motion.div>
             )}