diff --git a/web/src/ChatBox.js b/web/src/ChatBox.js
index 8bf1f218..fd3b7a56 100644
--- a/web/src/ChatBox.js
+++ b/web/src/ChatBox.js
@@ -49,27 +49,38 @@ class ChatBox extends React.Component {
         <List
           style={{maxHeight: "calc(100vh - 140px)", overflowY: "auto"}}
           itemLayout="horizontal"
-          dataSource={this.props.messages}
-          renderItem={(item, index) => (
-            <List.Item style={{
-              backgroundColor: index % 2 === 0 ? "white" : "rgb(247,247,248)",
-              borderBottom: "1px solid rgb(229, 229, 229)",
-              position: "relative",
-            }}>
-              <div style={{width: "800px", margin: "0 auto", position: "relative"}}>
-                <List.Item.Meta
-                  avatar={<Avatar style={{width: "30px", height: "30px", borderRadius: "3px"}} src={item.author === `${this.props.account.owner}/${this.props.account.name}` ? this.props.account.avatar : "https://cdn.casbin.com/casdoor/resource/built-in/admin/gpt.png"} />}
-                  title={<div style={{fontSize: "16px", fontWeight: "normal", lineHeight: "24px", marginTop: "-15px", marginLeft: "5px", marginRight: "80px"}}>{item.text}</div>}
-                />
-                <div style={{position: "absolute", top: "0px", right: "0px"}}
-                >
-                  <CopyOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
-                  <LikeOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
-                  <DislikeOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
+          dataSource={this.props.messages === undefined ? undefined : [...this.props.messages, {}]}
+          renderItem={(item, index) => {
+            if (Object.keys(item).length === 0 && item.constructor === Object) {
+              return <List.Item style={{
+                height: "160px",
+                backgroundColor: index % 2 === 0 ? "white" : "rgb(247,247,248)",
+                borderBottom: "1px solid rgb(229, 229, 229)",
+                position: "relative",
+              }} />;
+            }
+
+            return (
+              <List.Item style={{
+                backgroundColor: index % 2 === 0 ? "white" : "rgb(247,247,248)",
+                borderBottom: "1px solid rgb(229, 229, 229)",
+                position: "relative",
+              }}>
+                <div style={{width: "800px", margin: "0 auto", position: "relative"}}>
+                  <List.Item.Meta
+                    avatar={<Avatar style={{width: "30px", height: "30px", borderRadius: "3px"}} src={item.author === `${this.props.account.owner}/${this.props.account.name}` ? this.props.account.avatar : "https://cdn.casbin.com/casdoor/resource/built-in/admin/gpt.png"} />}
+                    title={<div style={{fontSize: "16px", fontWeight: "normal", lineHeight: "24px", marginTop: "-15px", marginLeft: "5px", marginRight: "80px"}}>{item.text}</div>}
+                  />
+                  <div style={{position: "absolute", top: "0px", right: "0px"}}
+                  >
+                    <CopyOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
+                    <LikeOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
+                    <DislikeOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
+                  </div>
                 </div>
-              </div>
-            </List.Item>
-          )}
+              </List.Item>
+            );
+          }}
         />
         <div style={{
           position: "absolute",
diff --git a/web/src/ChatMenu.js b/web/src/ChatMenu.js
index 14be4e7a..5c1ef6c5 100644
--- a/web/src/ChatMenu.js
+++ b/web/src/ChatMenu.js
@@ -19,8 +19,12 @@ import {LayoutOutlined} from "@ant-design/icons";
 class ChatMenu extends React.Component {
   constructor(props) {
     super(props);
+
+    const items = this.chatsToItems(this.props.chats);
+    const openKeys = items.map((item) => item.key);
+
     this.state = {
-      openKeys: ["0"],
+      openKeys: openKeys,
       selectedKeys: ["0-0"],
     };
   }
diff --git a/web/src/ChatPage.js b/web/src/ChatPage.js
index b37105d7..c8e9996b 100644
--- a/web/src/ChatPage.js
+++ b/web/src/ChatPage.js
@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import React from "react";
+import {Spin} from "antd";
 import moment from "moment";
 import ChatMenu from "./ChatMenu";
 import ChatBox from "./ChatBox";
@@ -76,18 +77,20 @@ class ChatPage extends BaseListPage {
   }
 
   renderTable(chats) {
-    return (
-      <div style={{display: "flex", height: "calc(100vh - 140px)"}}>
-        <div style={{width: "250px", height: "100%", backgroundColor: "lightblue"}}>
-          <ChatMenu chats={this.state.data} onSelect={(i) => {
-            const chat = chats[i];
-            this.getMessages(chat.name);
-          }} />
+    return (this.state.loading) ? <Spin size="large" style={{marginLeft: "50%", marginTop: "10%"}} /> : (
+      (
+        <div style={{display: "flex", height: "calc(100vh - 140px)"}}>
+          <div style={{width: "250px", height: "100%", backgroundColor: "lightblue"}}>
+            <ChatMenu chats={chats} onSelect={(i) => {
+              const chat = chats[i];
+              this.getMessages(chat.name);
+            }} />
+          </div>
+          <div style={{flex: 1, height: "100%", backgroundColor: "lightgreen"}}>
+            <ChatBox messages={this.state.messages} account={this.props.account} />
+          </div>
         </div>
-        <div style={{flex: 1, height: "100%", backgroundColor: "lightgreen"}}>
-          <ChatBox messages={this.state.messages} account={this.props.account} />
-        </div>
-      </div>
+      )
     );
   }