placeholder message

src/components/_chat.scss

@@ -315,6 +315,10 @@
       display: flex;
       justify-content: flex-end;
 
+      &.placeholder {
+        opacity: 0.5;
+      }
+
       .text {
         border: 1px solid $theme-color;
         background-color: $theme-color;

src/components/chatbox.jsx

@@ -62,6 +62,7 @@ class ChatBox extends React.Component {
       isMobile: true,
       isSlowConnection: true,
       decryptionErrors: {},
+      messagesInFlight: []
     }
     this.state = this.initialState
     this.chatboxInput = React.createRef();
@@ -353,9 +354,11 @@ class ChatBox extends React.Component {
   }
 
   sendMessage = (message) => {
+    console.log("SEND MESSAGE!", message)
     if (!this.state.client) {
       return null
     }
+
     this.state.client.sendTextMessage(this.state.roomId, message)
       .catch((err) => {
         switch (err["name"]) {
@@ -419,6 +422,16 @@ class ChatBox extends React.Component {
       return;
     }
 
+    console.log("this.state.messagesInFlight", this.state.messagesInFlight)
+    const messagesInFlight = [...this.state.messagesInFlight]
+    console.log("message", message)
+    const placeholderMessageIndex = messagesInFlight.findIndex(msg => msg === message.content.body)
+    console.log("placeholderMessageIndex", placeholderMessageIndex)
+    if (placeholderMessageIndex > -1) {
+      messagesInFlight.splice(placeholderMessageIndex, 1)
+      this.setState({ messagesInFlight })
+    }
+
     // check for decryption error message and replace with decrypted message
     // or push message to messages array
     const messages = [...this.state.messages]
@@ -562,9 +575,10 @@ class ChatBox extends React.Component {
     if (!Boolean(message)) return null;
 
     if (this.state.client && this.state.roomId) {
-      this.setState({ inputValue: "" })
+      const messagesInFlight = [...this.state.messagesInFlight]
+      messagesInFlight.push(message)
+      this.setState({ inputValue: "", messagesInFlight }, () => this.sendMessage(message))
       this.chatboxInput.current.focus()
-      return this.sendMessage(message)
     }
   }
 
@@ -578,7 +592,7 @@ class ChatBox extends React.Component {
   }
 
   render() {
-    const { ready, messages, inputValue, userId, roomId, typingStatus, opened, showDock, emojiSelectorOpen, isMobile, decryptionErrors } = this.state;
+    const { ready, messages, messagesInFlight, inputValue, userId, roomId, typingStatus, opened, showDock, emojiSelectorOpen, isMobile, decryptionErrors } = this.state;
     const inputLabel = 'Send a message...'
 
     return (
@@ -620,6 +634,14 @@ class ChatBox extends React.Component {
                       })
                     }
 
+                    {
+                      messagesInFlight.map((message, index) => {
+                        return(
+                          <Message key={`message-inflight-${index}`} message={{ content: { body: message }}} placeholder={true} />
+                        )
+                      })
+                    }
+
                     { typingStatus &&
                       <div className="notices">
                         <div role="status">{typingStatus}</div>

src/components/message.jsx

@@ -2,7 +2,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import Linkify from 'linkifyjs/react';
 
-const Message = ({ message, userId, botId, client }) => {
+const Message = ({ message, userId, botId, client, placeholder }) => {
 
   const senderClass = () => {
     switch (message.sender) {
@@ -17,6 +17,16 @@ const Message = ({ message, userId, botId, client }) => {
     }
   }
 
+  if (placeholder) {
+    return(
+      <div className={`message from-me placeholder`}>
+        <div className="text">
+          { message.content.body }
+        </div>
+      </div>
+    )
+  }
+
 
   if (message.content.msgtype === 'm.file') {
     const url = client.mxcUrlToHttp(message.content.url);