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 }

); } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index e42d3ce434..e0f4663532 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -512,6 +512,7 @@ "You have no historical rooms": "You have no historical rooms", "Historical": "Historical", "System Alerts": "System Alerts", + "Joining room...": "Joining room...", "Unable to ascertain that the address this invite was sent to matches one associated with your account.": "Unable to ascertain that the address this invite was sent to matches one associated with your account.", "This invitation was sent to an email address which is not associated with this account:": "This invitation was sent to an email address which is not associated with this account:", "You may wish to login with a different account, or add this email to this account.": "You may wish to login with a different account, or add this email to this account.",