From 1201707d17cc0a31e6bb2d34c7e75f80df055b86 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Wed, 1 Jul 2020 11:31:10 +1000
Subject: [PATCH] show tiny wheel while message is in sending state

---
 ts/components/conversation/Message.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 98b43c557..59f57566f 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -266,6 +266,14 @@ export class Message extends React.PureComponent<Props, State> {
     const isShowingImage = this.isShowingImage();
     const withImageNoCaption = Boolean(!text && isShowingImage);
     const showError = status === 'error' && direction === 'outgoing';
+    const showSentNoErrors =
+      !textPending &&
+      direction === 'outgoing' &&
+      status !== 'error' &&
+      status !== 'sending';
+
+    const showSending =
+      !textPending && direction === 'outgoing' && status === 'sending';
 
     return (
       <div
@@ -314,7 +322,15 @@ export class Message extends React.PureComponent<Props, State> {
           </div>
         ) : null}
         <span className="module-message__metadata__spacer" />
-        {!textPending && direction === 'outgoing' && status !== 'error' ? (
+        {showSending ? (
+          <div
+            className={classNames(
+              'module-message-detail__contact__status-icon',
+              `module-message-detail__contact__status-icon--${status}`
+            )}
+          />
+        ) : null}
+        {showSentNoErrors ? (
           <div className="message-read-receipt-container">
             <SessionIcon
               iconType={SessionIconType.Check}