Added spinner animation to replace save button when uploading a new profile picture

web/react/components/setting_picture.jsx

@@ -44,7 +44,11 @@ module.exports = React.createClass({
                             {server_error}
                             {client_error}
                             <span className='btn btn-sm btn-primary btn-file sel-btn'>Select<input ref='input' accept='.jpg,.png,.bmp' type='file' onChange={this.props.pictureChange}/></span>
+                            {!this.props.loadingPicture ?
                             <a className={this.props.submitActive ? 'btn btn-sm btn-primary' : 'btn btn-sm btn-inactive disabled'} onClick={this.props.submit}>Save</a>
+                            :
+                            <img className="spinner" src="/static/images/load.gif"/>
+                            }
                             <a className='btn btn-sm theme' href='#' onClick={self.props.updateSection}>Cancel</a>
                         </li>
                     </ul>

web/react/components/user_settings.jsx

@@ -748,6 +748,7 @@ var GeneralTab = React.createClass({
 
         var formData = new FormData();
         formData.append('image', picture, picture.name);
+        this.setState({loadingPicture: true});
 
         client.uploadProfileImage(formData,
             function() {
@@ -779,11 +780,10 @@ var GeneralTab = React.createClass({
     },
     updatePicture: function(e) {
         if (e.target.files && e.target.files[0]) {
-            this.setState({ picture: e.target.files[0] });
+            this.setState({picture: e.target.files[0]});
 
             this.submitActive = true;
             this.setState({client_error: null});
-
         } else {
             this.setState({picture: null});
         }
@@ -810,8 +810,8 @@ var GeneralTab = React.createClass({
     getInitialState: function() {
         var user = this.props.user;
 
-        return { username: user.username, first_name: user.first_name, last_name: user.last_name, nickname: user.nickname,
-                 email: user.email, picture: null };
+        return {username: user.username, first_name: user.first_name, last_name: user.last_name, nickname: user.nickname,
+                 email: user.email, picture: null, loadingPicture: false};
     },
     render: function() {
         var user = this.props.user;
@@ -1002,6 +1002,7 @@ var GeneralTab = React.createClass({
                     picture={this.state.picture}
                     pictureChange={this.updatePicture}
                     submitActive={this.submitActive}
+                    loadingPicture={this.state.loadingPicture}
                 />
             );
         } else {