From 3cf1900b03f1d0688ed81b74aed4d5ee60d3346e Mon Sep 17 00:00:00 2001
From: Hentry Martin <hentrymartin.p@gmail.com>
Date: Fri, 25 Apr 2025 19:14:42 +0200
Subject: [PATCH] fix: show spinner when changing between projects

---
 src/components/Users/index.js |  9 +++++++--
 src/containers/Users/index.js | 13 +++++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/Users/index.js b/src/components/Users/index.js
index 3d00edc0..609bcdbf 100644
--- a/src/components/Users/index.js
+++ b/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
diff --git a/src/containers/Users/index.js b/src/containers/Users/index.js
index 08ee1f01..25f13821 100644
--- a/src/containers/Users/index.js
+++ b/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()}