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,7 +19,8 @@ export default function DMs() {
   const router = useRouter();
   const { indicators, addIndicator } = useIndicators();
 
-  useEffect(() => {
+  useEffectOnceWhenReady(
+    () => {
       async function connectTargetNode() {
         if (!target) return;
         auth({
@@ -36,7 +38,10 @@ export default function DMs() {
         name: target?.display_name || id,
         kind: "text",
       });
-  }, [target]);
+    },
+    [target],
+    [(v) => v]
+  );
 
   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,7 +29,8 @@ export default function AppLayout({
   const router = useRouter();
   const isMobile = useIsMobile();
 
-  useEffect(() => {
+  useEffectOnceWhenReady(
+    () => {
       if (!app.profile?.node_address) return;
 
       auth({
@@ -37,7 +39,9 @@ export default function AppLayout({
         onNewMessage: (m) => {
           if (m.from !== chatWith && m.from !== app.profile?.id)
             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: {
@@ -57,7 +61,10 @@ export default function AppLayout({
         if (app.profile) prev[app.profile.id] = app.profile;
         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>
             )}