CrescentLeaf/LingChair
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ui(client): improve Message loading

Browse Source
This commit is contained in:
CrescentLeaf
2026-01-24 00:10:47 +08:00
parent da505305a3
commit 01ece27e75
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/ui/chat-fragment/ChatMessage.tsx
View File

@@ -116,6 +116,8 @@ const transformers: ChatParserTransformers = {
export default function ChatMessage({ message, noUserDisplay, avatarMenuItems, messageMenuItems }: { message: Message, noUserDisplay?: boolean, avatarMenuItems?: globalThis.React.JSX.IntrinsicElements['mdui-menu-item'][], messageMenuItems?: globalThis.React.JSX.IntrinsicElements['mdui-menu-item'][] }) { export default function ChatMessage({ message, noUserDisplay, avatarMenuItems, messageMenuItems }: { message: Message, noUserDisplay?: boolean, avatarMenuItems?: globalThis.React.JSX.IntrinsicElements['mdui-menu-item'][], messageMenuItems?: globalThis.React.JSX.IntrinsicElements['mdui-menu-item'][] }) {
const AppState = React.useContext(AppStateContext) const AppState = React.useContext(AppStateContext)
const [show, setShown] = React.useState(false)
const [isAtRight, setAtRight] = React.useState(false) const [isAtRight, setAtRight] = React.useState(false)
const messageDropDownRef = React.useRef<Dropdown>() const messageDropDownRef = React.useRef<Dropdown>()
@@ -130,13 +132,14 @@ export default function ChatMessage({ message, noUserDisplay, avatarMenuItems, m
setAvatarDropDownOpen(false) setAvatarDropDownOpen(false)
}) })
const [nickName, setNickName] = React.useState('') const [nickName, setNickName] = React.useState(message.getUserId()! || 'System')
const [avatarUrl, setAvatarUrl] = React.useState('') const [avatarUrl, setAvatarUrl] = React.useState('')
useAsyncEffect(async () => { useAsyncEffect(async () => {
const user = await ClientCache.getUser(message.getUserId()!) const user = await ClientCache.getUser(message.getUserId()!)
setAtRight(await ClientCache.getMySelf().then((re) => re?.getId()) == user?.getId()) setAtRight(await ClientCache.getMySelf().then((re) => re?.getId()) == user?.getId())
setNickName(user?.getNickName() || '') setNickName(user?.getNickName() || '')
setAvatarUrl(getClient().getUrlForFileByHash(user?.getAvatarFileHash() || '') || '') setAvatarUrl(getClient().getUrlForFileByHash(user?.getAvatarFileHash() || '') || '')
setShown(true)
}, [message]) }, [message])
const messageInnerRef = React.useRef<HTMLSpanElement>(null) const messageInnerRef = React.useRef<HTMLSpanElement>(null)
@@ -152,7 +155,11 @@ export default function ChatMessage({ message, noUserDisplay, avatarMenuItems, m
}) })
}, [message]) }, [message])
return ( return <>
<div style={{
display: show ? 'none' : undefined,
padding: '5px',
}}>加载中...</div>
<div <div
slot="trigger" slot="trigger"
onContextMenu={(e) => { onContextMenu={(e) => {
@@ -167,7 +174,7 @@ export default function ChatMessage({ message, noUserDisplay, avatarMenuItems, m
}} }}
style={{ style={{
width: "100%", width: "100%",
display: "flex", display: show ? 'flex' : 'none',
justifyContent: isAtRight ? "flex-end" : "flex-start", justifyContent: isAtRight ? "flex-end" : "flex-start",
flexDirection: "column" flexDirection: "column"
}}> }}>
@@ -260,5 +267,5 @@ export default function ChatMessage({ message, noUserDisplay, avatarMenuItems, m
</mdui-card> </mdui-card>
</div> </div>
) </>
} }