Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 05:04:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Show spinner while waiting on status message to commit

Browse Source 
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.
This commit is contained in:
J. Ryan Stinnett 2019-01-15 17:04:26 -06:00
parent 1082f548d3
commit 859f2a8646
2 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
res/css/views/context_menus/_StatusMessageContextMenu.scss
View File

@ -36,6 +36,10 @@ input.mx_StatusMessageContextMenu_message {
color: $memberstatus-placeholder-color; color: $memberstatus-placeholder-color;
} }
.mx_StatusMessageContextMenu_actionContainer {
display: flex;
}
.mx_StatusMessageContextMenu_submit, .mx_StatusMessageContextMenu_submit,
.mx_StatusMessageContextMenu_clear { .mx_StatusMessageContextMenu_clear {
@mixin mx_DialogButton; @mixin mx_DialogButton;
@ -43,6 +47,7 @@ input.mx_StatusMessageContextMenu_message {
font-size: 12px; font-size: 12px;
padding: 6px 1em; padding: 6px 1em;
border: 1px solid transparent; border: 1px solid transparent;
margin-right: 10px;
} }
.mx_StatusMessageContextMenu_submit[disabled] { .mx_StatusMessageContextMenu_submit[disabled] {
@ -54,3 +59,7 @@ input.mx_StatusMessageContextMenu_message {
background-color: transparent; background-color: transparent;
border: 1px solid $warning-color; border: 1px solid $warning-color;
} }
.mx_StatusMessageContextMenu_actionContainer .mx_Spinner {
justify-content: start;
}

26
src/components/views/context_menus/StatusMessageContextMenu.js
View File

@ -18,12 +18,15 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import MatrixClientPeg from '../../../MatrixClientPeg'; import MatrixClientPeg from '../../../MatrixClientPeg';
import sdk from '../../../index';
import AccessibleButton from '../elements/AccessibleButton'; import AccessibleButton from '../elements/AccessibleButton';
export default class StatusMessageContextMenu extends React.Component { export default class StatusMessageContextMenu extends React.Component {
static propTypes = { static propTypes = {
// js-sdk User object. Not required because it might not exist. // js-sdk User object. Not required because it might not exist.
user: PropTypes.object, user: PropTypes.object,
// True when waiting for status change to complete.
waiting: false,
}; };
constructor(props, context) { constructor(props, context) {
@ -61,16 +64,23 @@ export default class StatusMessageContextMenu extends React.Component {
// The `User` object has observed a status message change. // The `User` object has observed a status message change.
this.setState({ this.setState({
message: this.comittedStatusMessage, message: this.comittedStatusMessage,
waiting: false,
}); });
}; };
_onClearClick = async (e) => { _onClearClick = (e) => {
await MatrixClientPeg.get()._unstable_setStatusMessage(""); MatrixClientPeg.get()._unstable_setStatusMessage("");
this.setState({
waiting: true,
});
}; };
_onSubmit = (e) => { _onSubmit = (e) => {
e.preventDefault(); e.preventDefault();
MatrixClientPeg.get()._unstable_setStatusMessage(this.state.message); MatrixClientPeg.get()._unstable_setStatusMessage(this.state.message);
this.setState({
waiting: true,
});
}; };
_onStatusChange = (e) => { _onStatusChange = (e) => {
@ -81,6 +91,8 @@ export default class StatusMessageContextMenu extends React.Component {
}; };
render() { render() {
const Spinner = sdk.getComponent('views.elements.Spinner');
let actionButton; let actionButton;
if (this.comittedStatusMessage) { if (this.comittedStatusMessage) {
if (this.state.message === this.comittedStatusMessage) { if (this.state.message === this.comittedStatusMessage) {
@ -104,6 +116,11 @@ export default class StatusMessageContextMenu extends React.Component {
</AccessibleButton>; </AccessibleButton>;
} }
let spinner = null;
if (this.state.waiting) {
spinner = <Spinner w="24" h="24" />;
}
const form = <form className="mx_StatusMessageContextMenu_form" const form = <form className="mx_StatusMessageContextMenu_form"
autoComplete="off" onSubmit={this._onSubmit} autoComplete="off" onSubmit={this._onSubmit}
> >
@ -112,7 +129,10 @@ export default class StatusMessageContextMenu extends React.Component {
autoFocus={true} maxLength="60" value={this.state.message} autoFocus={true} maxLength="60" value={this.state.message}
onChange={this._onStatusChange} onChange={this._onStatusChange}
/> />
{actionButton} <div className="mx_StatusMessageContextMenu_actionContainer">
{actionButton}
{spinner}
</div>
</form>; </form>;
return <div className="mx_StatusMessageContextMenu"> return <div className="mx_StatusMessageContextMenu">