diff options
| -rw-r--r-- | web/react/components/more_channels.jsx | 34 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_sidebar--left.scss | 14 |
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; + } |