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 = ; + } + const form =
@@ -112,7 +129,10 @@ export default class StatusMessageContextMenu extends React.Component { autoFocus={true} maxLength="60" value={this.state.message} onChange={this._onStatusChange} /> - {actionButton} +
+ {actionButton} + {spinner} +
; return