Add empty list item and expand menu by default

web/src/ChatBox.js

@@ -49,8 +49,18 @@ class ChatBox extends React.Component {
         <List
           style={{maxHeight: "calc(100vh - 140px)", overflowY: "auto"}}
           itemLayout="horizontal"
-          dataSource={this.props.messages}
-          renderItem={(item, index) => (
+          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)",
@@ -69,7 +79,8 @@ class ChatBox extends React.Component {
                   </div>
                 </div>
               </List.Item>
-          )}
+            );
+          }}
         />
         <div style={{
           position: "absolute",

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"],
     };
   }

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,10 +77,11 @@ class ChatPage extends BaseListPage {
   }
 
   renderTable(chats) {
-    return (
+    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={this.state.data} onSelect={(i) => {
+            <ChatMenu chats={chats} onSelect={(i) => {
               const chat = chats[i];
               this.getMessages(chat.name);
             }} />
@@ -88,6 +90,7 @@ class ChatPage extends BaseListPage {
             <ChatBox messages={this.state.messages} account={this.props.account} />
           </div>
         </div>
+      )
     );
   }