From 859f2a86461d13aa2d142b23a013136d165656f1 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 15 Jan 2019 17:04:26 -0600
Subject: [PATCH] Show spinner while waiting on status message to commit

It can take some time to actually set the status message and see it play back as
a committed event.  This adds a spinner for immediate feedback so it's clear
that something is happening.

Fixes https://github.com/vector-im/riot-web/issues/8135.
---
 .../_StatusMessageContextMenu.scss            |  9 +++++++
 .../context_menus/StatusMessageContextMenu.js | 26 ++++++++++++++++---
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/res/css/views/context_menus/_StatusMessageContextMenu.scss b/res/css/views/context_menus/_StatusMessageContextMenu.scss
index 8b25f3a122..972f608caf 100644
--- a/res/css/views/context_menus/_StatusMessageContextMenu.scss
+++ b/res/css/views/context_menus/_StatusMessageContextMenu.scss
@@ -36,6 +36,10 @@ input.mx_StatusMessageContextMenu_message {
     color: $memberstatus-placeholder-color;
 }
 
+.mx_StatusMessageContextMenu_actionContainer {
+    display: flex;
+}
+
 .mx_StatusMessageContextMenu_submit,
 .mx_StatusMessageContextMenu_clear {
     @mixin mx_DialogButton;
@@ -43,6 +47,7 @@ input.mx_StatusMessageContextMenu_message {
     font-size: 12px;
     padding: 6px 1em;
     border: 1px solid transparent;
+    margin-right: 10px;
 }
 
 .mx_StatusMessageContextMenu_submit[disabled] {
@@ -54,3 +59,7 @@ input.mx_StatusMessageContextMenu_message {
     background-color: transparent;
     border: 1px solid $warning-color;
 }
+
+.mx_StatusMessageContextMenu_actionContainer .mx_Spinner {
+    justify-content: start;
+}
diff --git a/src/components/views/context_menus/StatusMessageContextMenu.js b/src/components/views/context_menus/StatusMessageContextMenu.js
index 9916f5d347..5a275c59f0 100644
--- a/src/components/views/context_menus/StatusMessageContextMenu.js
+++ b/src/components/views/context_menus/StatusMessageContextMenu.js
@@ -18,12 +18,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
+import sdk from '../../../index';
 import AccessibleButton from '../elements/AccessibleButton';
 
 export default class StatusMessageContextMenu extends React.Component {
     static propTypes = {
         // js-sdk User object. Not required because it might not exist.
         user: PropTypes.object,
+        // True when waiting for status change to complete.
+        waiting: false,
     };
 
     constructor(props, context) {
@@ -61,16 +64,23 @@ export default class StatusMessageContextMenu extends React.Component {
         // The `User` object has observed a status message change.
         this.setState({
             message: this.comittedStatusMessage,
+            waiting: false,
         });
     };
 
-    _onClearClick = async (e) => {
-        await MatrixClientPeg.get()._unstable_setStatusMessage("");
+    _onClearClick = (e) => {
+        MatrixClientPeg.get()._unstable_setStatusMessage("");
+        this.setState({
+            waiting: true,
+        });
     };
 
     _onSubmit = (e) => {
         e.preventDefault();
         MatrixClientPeg.get()._unstable_setStatusMessage(this.state.message);
+        this.setState({
+            waiting: true,
+        });
     };
 
     _onStatusChange = (e) => {
@@ -81,6 +91,8 @@ export default class StatusMessageContextMenu extends React.Component {
     };
 
     render() {
+        const Spinner = sdk.getComponent('views.elements.Spinner');
+
         let actionButton;
         if (this.comittedStatusMessage) {
             if (this.state.message === this.comittedStatusMessage) {
@@ -104,6 +116,11 @@ export default class StatusMessageContextMenu extends React.Component {
             </AccessibleButton>;
         }
 
+        let spinner = null;
+        if (this.state.waiting) {
+            spinner = <Spinner w="24" h="24" />;
+        }
+
         const form = <form className="mx_StatusMessageContextMenu_form"
             autoComplete="off" onSubmit={this._onSubmit}
         >
@@ -112,7 +129,10 @@ export default class StatusMessageContextMenu extends React.Component {
                 autoFocus={true} maxLength="60" value={this.state.message}
                 onChange={this._onStatusChange}
             />
-            {actionButton}
+            <div className="mx_StatusMessageContextMenu_actionContainer">
+                {actionButton}
+                {spinner}
+            </div>
         </form>;
 
         return <div className="mx_StatusMessageContextMenu">