Merge pull request #1647 from topcoder-platform/pm-1140

fix(PM-1140): show spinner when changing between projects

Author: kkartunov

src/components/Users/index.js

@@ -13,6 +13,7 @@ import { deleteProjectMemberInvite } from '../../services/projectMemberInvites'
 import ConfirmationModal from '../Modal/ConfirmationModal'
 import UserAddModalContent from './user-add.modal'
 import InviteUserModalContent from './invite-user.modal' // Import the new component
+import Loader from '../Loader'
 
 const theme = {
   container: styles.modalContainer
@@ -160,7 +161,8 @@ class Users extends Component {
       isEditable,
       isSearchingUserProjects,
       resultSearchUserProjects,
-      loadNextProjects
+      loadNextProjects,
+      isLoadingProject
     } = this.props
     const {
       searchKey
@@ -251,7 +253,7 @@ class Users extends Component {
           )
         }
         {
-          membersExist && (
+          !isLoadingProject && membersExist && (
             <>
               <div className={styles.header}>
                 <div className={cn(styles.col5)}>
@@ -305,6 +307,8 @@ class Users extends Component {
           )
         }
 
+        {isLoadingProject && <Loader />}
+
       </div>
     )
   }
@@ -322,6 +326,7 @@ Users.propTypes = {
   projects: PropTypes.arrayOf(PropTypes.object),
   projectMembers: PropTypes.arrayOf(PropTypes.object),
   invitedMembers: PropTypes.arrayOf(PropTypes.object),
+  isLoadingProject: PropTypes.bool.isRequired,
   searchUserProjects: PropTypes.func.isRequired,
   resultSearchUserProjects: PropTypes.arrayOf(PropTypes.object),
   loadNextProjects: PropTypes.func.isRequired

src/containers/Users/index.js

@@ -21,7 +21,8 @@ class Users extends Component {
       loginUserRoleInProject: '',
       projectMembers: null,
       invitedMembers: null,
-      isAdmin: false
+      isAdmin: false,
+      isLoadingProject: false
     }
     this.loadProject = this.loadProject.bind(this)
     this.updateProjectNember = this.updateProjectNember.bind(this)
@@ -80,9 +81,10 @@ class Users extends Component {
   }
 
   loadProject (projectId) {
+    this.setState({ isLoadingProject: true })
     fetchProjectById(projectId).then(async (project) => {
       const projectMembers = _.get(project, 'members')
-      const invitedMembers = _.get(project, 'invites')
+      const invitedMembers = _.get(project, 'invites') || []
       const invitedUserIds = _.filter(_.map(invitedMembers, 'userId'))
       const invitedUsers = await fetchInviteMembers(invitedUserIds)
 
@@ -91,7 +93,8 @@ class Users extends Component {
         invitedMembers: invitedMembers.map(m => ({
           ...m,
           email: m.email || invitedUsers[m.userId].handle
-        }))
+        })),
+        isLoadingProject: false
       })
       const { loggedInUser } = this.props
       this.updateLoginUserRoleInProject(projectMembers, loggedInUser)
@@ -156,7 +159,8 @@ class Users extends Component {
     const {
       projectMembers,
       invitedMembers,
-      isAdmin
+      isAdmin,
+      isLoadingProject
     } = this.state
     return (
       <UsersComponent
@@ -169,6 +173,7 @@ class Users extends Component {
         loadNextProjects={this.loadNextProjects}
         projectMembers={projectMembers}
         invitedMembers={invitedMembers}
+        isLoadingProject={isLoadingProject}
         auth={auth}
         isAdmin={isAdmin}
         isEditable={this.isEditable()}