From 0ee98e25824d3d84ef748733eaf07fab256da1f9 Mon Sep 17 00:00:00 2001
From: Yang Luo <hsluoyz@qq.com>
Date: Sun, 23 Apr 2023 00:25:09 +0800
Subject: [PATCH] Add loading to chat box

---
 web/src/ChatBox.js  | 15 ++++++++++++---
 web/src/ChatPage.js | 37 +++++++++++++++++++++----------------
 2 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/web/src/ChatBox.js b/web/src/ChatBox.js
index 6b631c68..cb0e0cc4 100644
--- a/web/src/ChatBox.js
+++ b/web/src/ChatBox.js
@@ -13,8 +13,9 @@
 // limitations under the License.
 
 import React from "react";
-import {Avatar, Input, List} from "antd";
+import {Avatar, Input, List, Spin} from "antd";
 import {CopyOutlined, DislikeOutlined, LikeOutlined, SendOutlined} from "@ant-design/icons";
+import i18next from "i18next";
 
 const {TextArea} = Input;
 
@@ -29,7 +30,7 @@ class ChatBox extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.messages !== this.props.messages) {
+    if (prevProps.messages !== this.props.messages && this.props.messages !== null) {
       this.scrollToListItem(this.props.messages.length);
     }
   }
@@ -74,11 +75,19 @@ class ChatBox extends React.Component {
   };
 
   renderList() {
+    if (this.props.messages === undefined || this.props.messages === null) {
+      return (
+        <div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
+          <Spin size="large" tip={i18next.t("login:Loading")} style={{paddingTop: "20%"}} />
+        </div>
+      );
+    }
+
     return (
       <div ref={this.listContainerRef} style={{position: "relative", maxHeight: "calc(100vh - 140px)", overflowY: "auto"}}>
         <List
           itemLayout="horizontal"
-          dataSource={this.props.messages === undefined ? undefined : [...this.props.messages, {}]}
+          dataSource={[...this.props.messages, {}]}
           renderItem={(item, index) => {
             if (Object.keys(item).length === 0 && item.constructor === Object) {
               return <List.Item id={`chatbox-list-item-${index}`} style={{
diff --git a/web/src/ChatPage.js b/web/src/ChatPage.js
index 3322380d..f343c4f4 100644
--- a/web/src/ChatPage.js
+++ b/web/src/ChatPage.js
@@ -122,28 +122,33 @@ class ChatPage extends BaseListPage {
           <div style={{width: "250px", height: "100%", backgroundColor: "white", borderRight: "1px solid rgb(245,245,245)"}}>
             <ChatMenu chats={chats} onSelect={(i) => {
               const chat = chats[i];
-              this.getMessages(chat.name);
               this.setState({
                 chatName: chat.name,
+                messages: null,
               });
+              this.getMessages(chat.name);
             }} />
           </div>
           <div style={{flex: 1, height: "100%", backgroundColor: "white", position: "relative"}}>
-            <div style={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              backgroundImage: "url(https://cdn.casbin.org/img/casdoor-logo_1185x256.png)",
-              backgroundPosition: "center",
-              backgroundRepeat: "no-repeat",
-              backgroundSize: "200px auto",
-              backgroundBlendMode: "luminosity",
-              filter: "grayscale(80%) brightness(140%) contrast(90%)",
-              opacity: 0.5,
-            }}>
-            </div>
+            {
+              this.state.messages === null ? null : (
+                <div style={{
+                  position: "absolute",
+                  top: -50,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  backgroundImage: "url(https://cdn.casbin.org/img/casdoor-logo_1185x256.png)",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                  backgroundSize: "200px auto",
+                  backgroundBlendMode: "luminosity",
+                  filter: "grayscale(80%) brightness(140%) contrast(90%)",
+                  opacity: 0.5,
+                }}>
+                </div>
+              )
+            }
             <ChatBox messages={this.state.messages} sendMessage={(text) => {this.sendMessage(text);}} account={this.props.account} />
           </div>
         </div>