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 {
;
}
+ let spinner = null;
+ if (this.state.waiting) {
+ spinner =