From 326d62a8bdb831f79bbbe10cbdcff860d4d5b7d9 Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Fri, 16 Jan 2026 23:45:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20LazyChatFragment=20=E7=9A=84=E4=BE=9D?=
 =?UTF-8?q?=E8=B5=96=E5=BF=98=E8=AE=B0=E4=BF=AE=E6=94=B9=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/ui/chat-fragment/LazyChatFragment.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/ui/chat-fragment/LazyChatFragment.tsx b/client/ui/chat-fragment/LazyChatFragment.tsx
index e2fd963..6408b32 100644
--- a/client/ui/chat-fragment/LazyChatFragment.tsx
+++ b/client/ui/chat-fragment/LazyChatFragment.tsx
@@ -1,14 +1,18 @@
 import { Chat } from "lingchair-client-protocol"
-import { Await } from "react-router"
 import getClient from "../../getClient"
 import ChatFragment from "./ChatFragment"
 import * as React from 'react'
-import EffectOnly from "../EffectOnly"
+import useAsyncEffect from "../../utils/useAsyncEffect"
 
 export default function LazyChatFragment({ chatId, openedInDialog }: { chatId: string, openedInDialog: boolean }) {
-    return <React.Suspense fallback={<EffectOnly effect={() => {}} deps={[]} />}>
-        <Await
-            resolve={React.useMemo(() => Chat.getByIdOrThrow(getClient(), chatId), [chatId])}
-            children={(chatInfo: Chat) => <ChatFragment chatInfo={chatInfo} openedInDialog={openedInDialog} />} />
+    const [child, setChild] = React.useState<React.ReactNode>()
+    const chatInfoPromise = React.useMemo(() => Chat.getByIdOrThrow(getClient(), chatId), [chatId])
+
+    useAsyncEffect(async () => {
+        setChild(<ChatFragment chatInfo={await chatInfoPromise} openedInDialog={openedInDialog} />)
+    }, [chatId])
+
+    return <React.Suspense fallback={null}>
+        {child}
     </React.Suspense>
 }