Added spinner icon to select_team listing after clicking on a team to load (#4120)

webapp/components/select_team/components/select_team_item.jsx

@@ -0,0 +1,50 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import {Link} from 'react-router/es6';
+
+export default class SelectTeamItem extends React.Component {
+    static propTypes = {
+        team: React.PropTypes.object.isRequired,
+        url: React.PropTypes.string.isRequired,
+        onTeamClick: React.PropTypes.func.isRequired,
+        loading: React.PropTypes.bool.isRequired
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.handleTeamClick = this.handleTeamClick.bind(this);
+    }
+
+    handleTeamClick() {
+        this.props.onTeamClick(this.props.team);
+    }
+
+    render() {
+        let icon;
+        if (this.props.loading) {
+            icon = (
+                <span className='fa fa-refresh fa-spin right signup-team__icon'/>
+            );
+        } else {
+            icon = (
+                <span className='fa fa-angle-right right signup-team__icon'/>
+            );
+        }
+
+        return (
+            <div className='signup-team-dir'>
+                <Link
+                    to={this.props.url}
+                    onClick={this.handleTeamClick}
+                >
+                    <span className='signup-team-dir__name'>{this.props.team.display_name}</span>
+                    {icon}
+                </Link>
+            </div>
+        );
+    }
+}

webapp/components/select_team/select_team.jsx

@@ -9,6 +9,7 @@ import ErrorBar from 'components/error_bar.jsx';
 import LoadingScreen from 'components/loading_screen.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
+import SelectTeamItem from './components/select_team_item.jsx';
 
 import {Link} from 'react-router/es6';
 
@@ -22,8 +23,10 @@ export default class SelectTeam extends React.Component {
     constructor(props) {
         super(props);
         this.onTeamChange = this.onTeamChange.bind(this);
+        this.handleTeamClick = this.handleTeamClick.bind(this);
 
         const state = this.getStateFromStores(false);
+        state.loadingTeamId = '';
         this.state = state;
     }
 
@@ -49,6 +52,10 @@ export default class SelectTeam extends React.Component {
         };
     }
 
+    handleTeamClick(team) {
+        this.setState({loadingTeamId: team.id});
+    }
+
     render() {
         let content = null;
         let teamContents = [];
@@ -56,51 +63,36 @@ export default class SelectTeam extends React.Component {
         const isSystemAdmin = Utils.isSystemAdmin(UserStore.getCurrentUser().roles);
         let teamMembersCount = 0;
 
-        for (var index in this.state.teamMembers) {
-            if (this.state.teamMembers.hasOwnProperty(index)) {
-                var teamMember = this.state.teamMembers[index];
-                var team = this.state.teams[teamMember.team_id];
-                isAlreadyMember[teamMember.team_id] = true;
-                teamMembersCount++;
-                teamContents.push(
-                    <div
-                        key={'team_' + team.name}
-                        className='signup-team-dir'
-                    >
-                        <Link
-                            to={'/' + team.name + '/channels/town-square'}
-                        >
-                            <span className='signup-team-dir__name'>{team.display_name}</span>
-                            <span
-                                className='fa fa-angle-right right signup-team__icon'
-                                aria-hidden='true'
-                            />
-                        </Link>
-                    </div>
-                );
-            }
+        for (const teamMember of this.state.teamMembers) {
+            const teamId = teamMember.team_id;
+            const team = this.state.teams[teamId];
+            isAlreadyMember[teamId] = true;
+            teamMembersCount++;
+
+            teamContents.push(
+                <SelectTeamItem
+                    key={'team_' + team.name}
+                    team={team}
+                    url={'/' + team.name + '/channels/town-square'}
+                    onTeamClick={this.handleTeamClick}
+                    loading={this.state.loadingTeamId === teamId}
+                />
+            );
         }
 
         var openTeamContents = [];
 
-        for (var id in this.state.teamListings) {
+        for (const id in this.state.teamListings) {
             if (this.state.teamListings.hasOwnProperty(id) && !isAlreadyMember[id]) {
-                var openTeam = this.state.teamListings[id];
+                const openTeam = this.state.teamListings[id];
                 openTeamContents.push(
-                    <div
+                    <SelectTeamItem
                         key={'team_' + openTeam.name}
-                        className='signup-team-dir'
-                    >
-                        <Link
-                            to={`/signup_user_complete/?id=${openTeam.invite_id}`}
-                        >
-                            <span className='signup-team-dir__name'>{openTeam.display_name}</span>
-                            <span
-                                className='fa fa-angle-right right signup-team__icon'
-                                aria-hidden='true'
-                            />
-                        </Link>
-                    </div>
+                        team={openTeam}
+                        url={`/signup_user_complete/?id=${openTeam.invite_id}`}
+                        onTeamClick={this.handleTeamClick}
+                        loading={this.state.loadingTeamId === openTeam.id}
+                    />
                 );
             }
         }

webapp/sass/routes/_signup.scss

@@ -493,9 +493,8 @@
         top: .66em;
 
         &.fa-spin {
-            color: $gray;
             font-size: .9em;
-            right: 10px;
+            right: -2px;
             top: 16px;
         }
     }

webapp/stores/team_store.jsx

@@ -139,7 +139,7 @@ class TeamStoreClass extends EventEmitter {
         for (var index in this.team_members) {
             if (this.team_members.hasOwnProperty(index)) {
                 if (this.team_members[index].team_id === teamId) {
-                    Reflect.deleteProperty(this.team_members, index);
+                    this.team_members.splice(index, 1);
                 }
             }
         }