From af0597e0c89d6d946abef76f6236c4a4a75299ac Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 9 Feb 2016 16:55:03 +0000
Subject: [PATCH] Joining a room can take a while. Show a spinner otherwise
 we'll end up in multiple join city.

---
 src/components/structures/RoomView.js        | 16 ++++++++++++----
 src/components/views/rooms/RoomPreviewBar.js |  9 +++++++++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index a72ee07e24..cd5e1a84a6 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1464,7 +1464,9 @@ module.exports = React.createClass({
                             <RoomHeader ref="header" room={this.state.room} simpleHeader="Join room"/>
                             <div className="mx_RoomView_auxPanel">
                                 <RoomPreviewBar onJoinClick={ this.onJoinButtonClicked } 
-                                                canJoin={ true } canPreview={ false }/>
+                                                canJoin={ true } canPreview={ false }
+                                                spinner={this.state.joining}
+                                />
                                 <div className="error">{joinErrorText}</div>
                             </div>
                             <div className="mx_RoomView_messagePanel"></div>
@@ -1507,7 +1509,9 @@ module.exports = React.createClass({
                             <RoomPreviewBar onJoinClick={ this.onJoinButtonClicked } 
                                             onRejectClick={ this.onRejectButtonClicked }
                                             inviterName={ inviterName }
-                                            canJoin={ true } canPreview={ false }/>
+                                            canJoin={ true } canPreview={ false }
+                                            spinner={this.state.joining}
+                            />
                             <div className="error">{joinErrorText}</div>
                             <div className="error">{rejectErrorText}</div>
                         </div>
@@ -1573,13 +1577,17 @@ module.exports = React.createClass({
         else if (this.state.guestsCanJoin && MatrixClientPeg.get().isGuest() &&
                 (!myMember || myMember.membership !== "join")) {
             aux = (
-                <RoomPreviewBar onJoinClick={this.onJoinButtonClicked} canJoin={true} />
+                <RoomPreviewBar onJoinClick={this.onJoinButtonClicked} canJoin={true}
+                                spinner={this.state.joining}
+                />
             );
         }
         else if (this.state.canPeek &&
                 (!myMember || myMember.membership !== "join")) {
             aux = (
-                <RoomPreviewBar onJoinClick={this.onJoinButtonClicked} canJoin={true} />
+                <RoomPreviewBar onJoinClick={this.onJoinButtonClicked} canJoin={true}
+                                spinner={this.state.joining}
+                />
             );
         }
 
diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index 52e6639f13..eb57a0d913 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+var sdk = require('../../../index');
 
 module.exports = React.createClass({
     displayName: 'RoomPreviewBar',
@@ -27,6 +28,7 @@ module.exports = React.createClass({
         inviterName: React.PropTypes.string,
         canJoin: React.PropTypes.bool,
         canPreview: React.PropTypes.bool,
+        spinner: React.PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -40,6 +42,13 @@ module.exports = React.createClass({
     render: function() {
         var joinBlock, previewBlock;
 
+        if (this.props.spinner) {
+            var Spinner = sdk.getComponent("elements.Spinner");
+            return (<div className="mx_RoomPreviewBar">
+                <Spinner />
+            </div>);
+        }
+
         if (this.props.inviterName) {
             joinBlock = (
                 <div>