Fixed issue with channel name in url and added loading icon to replace 'Join' button for slow connections

2 files changed, 35 insertions, 13 deletions

diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index bc634ba55..2b2c8b68d 100644
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -24,6 +24,7 @@ export default class MoreChannels extends React.Component {
 
         var initState = getStateFromStores();
         initState.channelType = '';
+        initState.joiningChannel = -1;
         this.state = initState;
     }
     componentDidMount() {
@@ -47,14 +48,17 @@ export default class MoreChannels extends React.Component {
             this.setState(newState);
         }
     }
-    handleJoin(id) {
-        client.joinChannel(id,
-            function joinSuccess(data) {
+    handleJoin(channel, channelIndex) {
+        this.setState({joiningChannel: channelIndex});
+        client.joinChannel(channel.id,
+            function joinSuccess() {
                 $(this.refs.modal.getDOMNode()).modal('hide');
-                asyncClient.getChannel(id);
-                utils.switchChannel(data);
+                asyncClient.getChannel(channel.id);
+                utils.switchChannel(channel);
+                this.setState({joiningChannel: -1});
             }.bind(this),
             function joinFail(err) {
+                this.setState({joiningChannel: -1});
                 this.state.serverError = err.message;
                 this.setState(this.state);
             }.bind(this)
@@ -79,7 +83,20 @@ export default class MoreChannels extends React.Component {
                     moreChannels = (
                         <table className='more-channel-table table'>
                             <tbody>
-                                {channels.map(function cMap(channel) {
+                                {channels.map(function cMap(channel, index) {
+                                    var joinButton;
+                                    if (self.state.joiningChannel === index) {
+                                        joinButton = (<img
+                                                        className='join-channel-loading-gif'
+                                                        src='/static/images/load.gif'
+                                                    />);
+                                    } else {
+                                        joinButton = (<button
+                                                        onClick={self.handleJoin.bind(self, channel, index)}
+                                                        className='btn btn-primary'>Join
+                                                    </button>);
+                                    }
+
                                     return (
                                         <tr key={channel.id}>
                                             <td>
@@ -87,10 +104,7 @@ export default class MoreChannels extends React.Component {
                                                 <p className='more-channel-description'>{channel.description}</p>
                                             </td>
                                             <td className='td--action'>
-                                                <button
-                                                    onClick={self.handleJoin.bind(self, channel.id)}
-                                                    className='btn btn-primary'>Join
-                                                </button>
+                                                {joinButton}
                                             </td>
                                         </tr>
                                     );
diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss
index 6d9f2ad8b..7bbaa21cb 100644
--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ b/web/sass-files/sass/partials/_sidebar--left.scss
@@ -124,7 +124,15 @@
 }
 
 .channel-loading-gif {
-    height:15px;
-    width:15px;
-    margin-top:2px;
+    height: 15px;
+    width: 15px;
+    margin-top: 2px;
+}
+
+.join-channel-loading-gif {
+    margin-top: 5px;
+    margin-left: 10px;
+    height: 25px;
+    width: 25px;
+
 }