v1.6.6/release- chat fix- hbo click fix- hbo resize

app/src/Thread.js

@@ -149,9 +149,9 @@ export default class Thread extends Component {
   }
   getMessage(params) {
     const { autoSizeWidth } = this.state;
-    const { sendingMessages, sentMessages, setReplyTo } = this.props;
+    const { sentMessages, setReplyTo } = this.props;
     const { userUid } = LocalData();
-    const messages = [...sentMessages, ...sendingMessages];
+    const messages = sentMessages;
     const msg = messages[params.index];
     const msgIdx = params.index;
     return (
@@ -190,9 +190,10 @@ export default class Thread extends Component {
     );
   }
   render() {
+    const { userUid } = LocalData();
     const { autoSizeWidth } = this.state;
-    const { sendingMessages, sentMessages } = this.props;
-    return (
+    const { sentMessages, isSending, sendingMessages, setReplyTo } = this.props;
+    return !isSending ? (
       <AutoSizer style={{ flex: 1 }}>
         {({ height, width }) => {
           if (autoSizeWidth !== width) {
@@ -200,7 +201,6 @@ export default class Thread extends Component {
             this.listRef.current.recomputeRowHeights();
             this.setState({ autoSizeWidth: width });
           }
-
           return (
             <List
               className="thread-wrapper"
@@ -208,13 +208,38 @@ export default class Thread extends Component {
               height={height}
               width={width}
               ref={this.listRef}
-              rowCount={sendingMessages.length + sentMessages.length}
+              estimatedRowSize={40}
+              rowCount={sentMessages.length}
               rowHeight={({ index }) => cache.rowHeight({ index }) + 10}
               rowRenderer={this.getMessage}
             />
           );
         }}
       </AutoSizer>
+    ) : (
+      <div className="thread-wrapper sending-wrapper">
+        {sendingMessages.map((msg, msgIdx) => (
+          <div
+            id={msg.id || `sending-${msgIdx}`}
+            key={`sending-msg-${msgIdx}-item`}
+            className={this.getItemClassNames(msg.uid, userUid, msgIdx, sendingMessages, true)}
+          >
+            <div className="thread-name">{msg.name}</div>
+            {this.getReplyMessage(msg.replyTo, sentMessages)}
+            <div className="thread-message">
+              <div className="thread-overline">
+                <span>{this.getTimeString(msg.time)}</span>
+                <div className="thread-reply-icon">
+                  <IconButton onClick={() => setReplyTo(msg)}>
+                    <Reply />
+                  </IconButton>
+                </div>
+              </div>
+              {this.getMessageTextOrImage(msg, null)}
+            </div>
+          </div>
+        ))}
+      </div>
     );
   }
 }