ui: 細節優化: 發送消息時, 轉圈

client/ui/chat/ChatFragment.tsx

@@ -116,9 +116,14 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
     const [showLoadingMoreMessagesTip, setShowLoadingMoreMessagesTip] = React.useState(false)
     const [showNoMoreMessagesTip, setShowNoMoreMessagesTip] = React.useState(false)
 
+    const [isMessageSending, setIsMessageSending] = React.useState(false)
+
     const cachedFiles = React.useRef({} as { [fileName: string]: ArrayBuffer })
     async function sendMessage() {
+        try {
             let text = inputRef.current!.value
+            if (text.trim() == '') return
+            setIsMessageSending(true)
             for (const fileName of Object.keys(cachedFiles.current)) {
                 if (text.indexOf(fileName) != -1) {
                     const re = await Client.invoke("Chat.uploadFile", {
@@ -140,6 +145,13 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
             if (checkApiSuccessOrSncakbar(re, "發送失敗")) return
             inputRef.current!.value = ''
             cachedFiles.current = {}
+        } catch (e) {
+            snackbar({
+                message: '發送失敗: ' + (e as Error).message,
+                placement: 'top',
+            })
+        }
+        setIsMessageSending(false)
     }
 
     return (
@@ -160,7 +172,7 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                     showReturnButton && <mdui-button-icon icon="arrow_back" onClick={onReturnButtonClicked} style={{
                         alignSelf: 'center',
                         marginLeft: '5px',
-                        marginRight: '15px',
+                        marginRight: '5px',
                     }}></mdui-button-icon>
                 }
                 <mdui-tab value="Chat">{
@@ -302,7 +314,7 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                         }}></mdui-button-icon>
                         <mdui-button-icon icon="send" style={{
                             marginRight: '7px',
-                        }} onClick={() => sendMessage()}></mdui-button-icon>
+                        }} onClick={() => sendMessage()} loading={isMessageSending}></mdui-button-icon>
                     </div>
                 </mdui-tab-panel>
                 <mdui-tab-panel slot="panel" value="Settings" style={{