Added SpinnerButton component to handle buttons that are also spinners

webapp/components/channel_invite_button.jsx

@@ -7,8 +7,7 @@ import * as AsyncClient from 'utils/async_client.jsx';
 import * as Client from 'utils/client.jsx';
 
 import {FormattedMessage} from 'react-intl';
-
+import SpinnerButton from 'components/spinner_button.jsx';
-import loadingGif from 'images/load.gif';
 
 export default class ChannelInviteButton extends React.Component {
     static get propTypes() {
@@ -29,9 +28,7 @@ export default class ChannelInviteButton extends React.Component {
         };
     }
 
-    handleClick(e) {
+    handleClick() {
-        e.preventDefault();
-
         if (this.state.addingUser) {
             return;
         }
@@ -66,26 +63,17 @@ export default class ChannelInviteButton extends React.Component {
     }
 
     render() {
-        if (this.state.addingUser) {
-            return (
-                <img
-                    className='channel-loading-gif'
-                    src={loadingGif}
-                />
-            );
-        }
-
         return (
-            <a
+            <SpinnerButton
                 onClick={this.handleClick}
-                className='btn btn-sm btn-primary'
+                spinning={this.state.addingUser}
             >
                 <i className='glyphicon glyphicon-envelope'/>
                 <FormattedMessage
                     id='channel_invite.add'
                     defaultMessage=' Add'
                 />
-            </a>
+            </SpinnerButton>
         );
     }
 }

webapp/components/more_direct_channels.jsx

@@ -5,9 +5,9 @@ import {Modal} from 'react-bootstrap';
 import FilteredUserList from './filtered_user_list.jsx';
 import UserStore from 'stores/user_store.jsx';
 import * as Utils from 'utils/utils.jsx';
-import loadingGif from 'images/load.gif';
 
 import {FormattedMessage} from 'react-intl';
+import SpinnerButton from 'components/spinner_button.jsx';
 
 import React from 'react';
 
@@ -83,26 +83,16 @@ export default class MoreDirectChannels extends React.Component {
     }
 
     createJoinDirectChannelButton({user}) {
-        if (this.state.loadingDMChannel === user.id) {
-            return (
-                <img
-                    className='channel-loading-gif'
-                    src={loadingGif}
-                />
-            );
-        }
-
         return (
-            <button
+            <SpinnerButton
-                type='button'
+                spinning={this.state.loadingDMChannel === user.id}
-                className='btn btn-primary btn-message'
                 onClick={this.handleShowDirectChannel.bind(this, user)}
             >
                 <FormattedMessage
                     id='more_direct_channels.message'
                     defaultMessage='Message'
                 />
-            </button>
+            </SpinnerButton>
         );
     }
 

webapp/components/spinner_button.jsx

@@ -0,0 +1,48 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import loadingGif from 'images/load.gif';
+
+export default class SpinnerButton extends React.Component {
+    static get propTypes() {
+        return {
+            children: React.PropTypes.node,
+            spinning: React.PropTypes.bool.isRequired,
+            onClick: React.PropTypes.func
+        };
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick(e) {
+        if (this.props.onClick) {
+            this.props.onClick(e);
+        }
+    }
+
+    render() {
+        if (this.props.spinning) {
+            return (
+                <img
+                    className='spinner-button__gif'
+                    src={loadingGif}
+                />
+            );
+        }
+
+        return (
+            <button
+                onClick={this.handleClick}
+                className='btn btn-sm btn-primary'
+            >
+                {this.props.children}
+            </button>
+        );
+    }
+}

webapp/sass/components/_spinner-button.scss

@@ -0,0 +1,8 @@
+@charset 'UTF-8';
+
+.spinner-button__gif {
+    height: 15px;
+    margin-top: 2px;
+    width: 15px;
+}
+