diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss index 331eb582ea..8196740499 100644 --- a/res/css/views/rooms/_RoomPreviewBar.scss +++ b/res/css/views/rooms/_RoomPreviewBar.scss @@ -56,3 +56,7 @@ limitations under the License. .mx_RoomPreviewBar_warningIcon { padding: 12px; } + +.mx_RoomPreviewBar_spinnerIntro { + margin-top: 50px; +} \ No newline at end of file diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 23c2980f24..54f51c7a71 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -1514,6 +1514,7 @@ module.exports = React.createClass({ canPreview={false} error={this.state.roomLoadError} roomAlias={roomAlias} spinner={this.state.joining} + spinnerState="joining" inviterName={inviterName} invitedEmail={invitedEmail} room={this.state.room} @@ -1558,6 +1559,7 @@ module.exports = React.createClass({ inviterName={inviterName} canPreview={false} spinner={this.state.joining} + spinnerState="joining" room={this.state.room} /> @@ -1645,6 +1647,7 @@ module.exports = React.createClass({ onForgetClick={this.onForgetClick} onRejectClick={this.onRejectThreepidInviteButtonClicked} spinner={this.state.joining} + spinnerState="joining" inviterName={inviterName} invitedEmail={invitedEmail} canPreview={this.state.canPeek} diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js index 5ec19d185e..9d3dbe5217 100644 --- a/src/components/views/rooms/RoomPreviewBar.js +++ b/src/components/views/rooms/RoomPreviewBar.js @@ -44,9 +44,13 @@ module.exports = React.createClass({ error: PropTypes.object, canPreview: PropTypes.bool, - spinner: PropTypes.bool, room: PropTypes.object, + // When a spinner is present, a spinnerState can be specified to indicate the + // purpose of the spinner. + spinner: PropTypes.bool, + spinnerState: PropTypes.oneOf(["joining"]), + // The alias that was used to access this room, if appropriate // If given, this will be how the room is referred to (eg. // in error messages). @@ -93,7 +97,12 @@ module.exports = React.createClass({ if (this.props.spinner || this.state.busy) { const Spinner = sdk.getComponent("elements.Spinner"); + let spinnerIntro = ""; + if (this.props.spinnerState === "joining") { + spinnerIntro = _t("Joining room..."); + } return (
{ spinnerIntro }