Joining a room can take a while. Show a spinner otherwise we'll end up in multiple join city.

This commit is contained in:
David Baker 2016-02-09 16:55:03 +00:00
parent b5f7bd6cfb
commit af0597e0c8
2 changed files with 21 additions and 4 deletions

View file

@ -1464,7 +1464,9 @@ module.exports = React.createClass({
<RoomHeader ref="header" room={this.state.room} simpleHeader="Join room"/> <RoomHeader ref="header" room={this.state.room} simpleHeader="Join room"/>
<div className="mx_RoomView_auxPanel"> <div className="mx_RoomView_auxPanel">
<RoomPreviewBar onJoinClick={ this.onJoinButtonClicked } <RoomPreviewBar onJoinClick={ this.onJoinButtonClicked }
canJoin={ true } canPreview={ false }/> canJoin={ true } canPreview={ false }
spinner={this.state.joining}
/>
<div className="error">{joinErrorText}</div> <div className="error">{joinErrorText}</div>
</div> </div>
<div className="mx_RoomView_messagePanel"></div> <div className="mx_RoomView_messagePanel"></div>
@ -1507,7 +1509,9 @@ module.exports = React.createClass({
<RoomPreviewBar onJoinClick={ this.onJoinButtonClicked } <RoomPreviewBar onJoinClick={ this.onJoinButtonClicked }
onRejectClick={ this.onRejectButtonClicked } onRejectClick={ this.onRejectButtonClicked }
inviterName={ inviterName } inviterName={ inviterName }
canJoin={ true } canPreview={ false }/> canJoin={ true } canPreview={ false }
spinner={this.state.joining}
/>
<div className="error">{joinErrorText}</div> <div className="error">{joinErrorText}</div>
<div className="error">{rejectErrorText}</div> <div className="error">{rejectErrorText}</div>
</div> </div>
@ -1573,13 +1577,17 @@ module.exports = React.createClass({
else if (this.state.guestsCanJoin && MatrixClientPeg.get().isGuest() && else if (this.state.guestsCanJoin && MatrixClientPeg.get().isGuest() &&
(!myMember || myMember.membership !== "join")) { (!myMember || myMember.membership !== "join")) {
aux = ( aux = (
<RoomPreviewBar onJoinClick={this.onJoinButtonClicked} canJoin={true} /> <RoomPreviewBar onJoinClick={this.onJoinButtonClicked} canJoin={true}
spinner={this.state.joining}
/>
); );
} }
else if (this.state.canPeek && else if (this.state.canPeek &&
(!myMember || myMember.membership !== "join")) { (!myMember || myMember.membership !== "join")) {
aux = ( aux = (
<RoomPreviewBar onJoinClick={this.onJoinButtonClicked} canJoin={true} /> <RoomPreviewBar onJoinClick={this.onJoinButtonClicked} canJoin={true}
spinner={this.state.joining}
/>
); );
} }

View file

@ -17,6 +17,7 @@ limitations under the License.
'use strict'; 'use strict';
var React = require('react'); var React = require('react');
var sdk = require('../../../index');
module.exports = React.createClass({ module.exports = React.createClass({
displayName: 'RoomPreviewBar', displayName: 'RoomPreviewBar',
@ -27,6 +28,7 @@ module.exports = React.createClass({
inviterName: React.PropTypes.string, inviterName: React.PropTypes.string,
canJoin: React.PropTypes.bool, canJoin: React.PropTypes.bool,
canPreview: React.PropTypes.bool, canPreview: React.PropTypes.bool,
spinner: React.PropTypes.bool,
}, },
getDefaultProps: function() { getDefaultProps: function() {
@ -40,6 +42,13 @@ module.exports = React.createClass({
render: function() { render: function() {
var joinBlock, previewBlock; var joinBlock, previewBlock;
if (this.props.spinner) {
var Spinner = sdk.getComponent("elements.Spinner");
return (<div className="mx_RoomPreviewBar">
<Spinner />
</div>);
}
if (this.props.inviterName) { if (this.props.inviterName) {
joinBlock = ( joinBlock = (
<div> <div>