Merge pull request #2382 from OneCommunityGlobal/akshit_add_load_spin…

…ning_circle akshit_add_loading_spinning_circle
OneCommunityGlobal · Jul 19, 2024 · b145642 · b145642
2 parents f906f4f + 842f31c
commit b145642
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 37 deletions.
diff --git a/src/actions/projectMembers.js b/src/actions/projectMembers.js
@@ -110,17 +110,16 @@ export const findUserProfiles = keyword => {
  * Call API to get all members
  */
 export const fetchAllMembers = projectId => {
-  const request = axios.get(ENDPOINTS.PROJECT_MEMBER(projectId));
+  // const request = axios.get(ENDPOINTS.PROJECT_MEMBER(projectId));
   return async dispatch => {
-    await dispatch(setMemberStart());
-    await dispatch(foundUsers([]));
-    request
-      .then(res => {
-        dispatch(setMembers(res.data));
-      })
-      .catch(err => {
-        dispatch(setMembersError(err));
-      });
+    dispatch(setMemberStart());
+    dispatch(foundUsers([])); // Clear found users
+    try {
+      const response = await axios.get(ENDPOINTS.PROJECT_MEMBER(projectId));
+      dispatch(setMembers(response.data));
+    } catch (err) {
+      dispatch(setMembersError(err));
+    }
   };
 };
 

diff --git a/src/components/Projects/Members/Members.jsx b/src/components/Projects/Members/Members.jsx
@@ -19,6 +19,8 @@ import './members.css';
 import hasPermission from '../../../utils/permissions';
 import { boxStyle, boxStyleDark } from 'styles';
 import ToggleSwitch from 'components/UserProfile/UserProfileEdit/ToggleSwitch';
+import Loading from 'components/common/Loading';
+
 
 const Members = props => {
   const darkMode = props.state.theme.darkMode;
@@ -27,12 +29,19 @@ const Members = props => {
   const [showFindUserList, setShowFindUserList] = useState(false);
   const [membersList, setMembersList] = useState(props.state.projectMembers.members);
   const [lastTimeoutId, setLastTimeoutId] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
 
   const canAssignProjectToUsers = props.hasPermission('assignProjectToUsers');
   const canUnassignUserInProject = props.hasPermission('unassignUserInProject');
 
   useEffect(() => {
-    props.fetchAllMembers(projectId);
+    const fetchMembers = async () => {
+      setIsLoading(true);
+      setMembersList([]); 
+      await props.fetchAllMembers(projectId);
+      setIsLoading(false);
+    };
+    fetchMembers();
   }, [projectId]);
 
   const assignAll = async () => {
@@ -49,8 +58,10 @@ const Members = props => {
   };
 
   useEffect(() => {
-    setMembersList(props.state.projectMembers.members);
-  }, [props.state.projectMembers.members]);
+    if (!isLoading) {
+      setMembersList(props.state.projectMembers.members);
+    }
+  }, [props.state.projectMembers.members, isLoading]);
 
   // ADDED: State for toggling display of active members only
   const [showActiveMembersOnly, setShowActiveMembersOnly] = useState(false);
@@ -180,29 +191,31 @@ const Members = props => {
             handleUserProfile={handleToggle}
           />
 
-          <table className={`table table-bordered table-responsive-sm ${darkMode ? 'text-light dark-mode bg-yinmn-blue' : ''}`}>
-            <thead>
-              <tr className={darkMode ? 'bg-space-cadet' : ''}>
-                <th scope="col" id="members__order">
-                  #
-                </th>
-                <th scope="col" id="members__name"></th>
-                {canUnassignUserInProject ? <th scope="col" id="members__name"></th> : null}
-              </tr>
-            </thead>
-            <tbody>
-              {displayedMembers.map((member, i) => (
-                <Member
-                  index={i}
-                  key={member._id ?? i}
-                  projectId={projectId}
-                  uid={member._id}
-                  fullName={member.firstName + ' ' + member.lastName}
-                  darkMode={darkMode}
-                />
-              ))}
-            </tbody>
-          </table>
+          {isLoading ? ( <Loading align="center" /> ) : (
+            <table className={`table table-bordered table-responsive-sm ${darkMode ? 'text-light' : ''}`}>
+              <thead>
+                <tr className={darkMode ? 'bg-space-cadet' : ''}>
+                  <th scope="col" id="members__order">
+                    #
+                  </th>
+                  <th scope="col" id="members__name"></th>
+                  {canUnassignUserInProject ? <th scope="col" id="members__name"></th> : null}
+                </tr>
+              </thead>
+              <tbody>
+                {displayedMembers.map((member, i) => (
+                  <Member
+                    index={i}
+                    key={member._id ?? i}
+                    projectId={projectId}
+                    uid={member._id}
+                    fullName={member.firstName + ' ' + member.lastName}
+                    darkMode={darkMode}
+                  />
+                ))}
+              </tbody>
+            </table> 
+          )}
         </div>
       </div>
     </React.Fragment>

diff --git a/src/components/Projects/Members/members.css b/src/components/Projects/Members/members.css
@@ -32,3 +32,6 @@
   width: 20px;
   text-align: center;
 }
+
+
+
diff --git a/src/components/Projects/Projects.jsx b/src/components/Projects/Projects.jsx
@@ -196,7 +196,7 @@ const Projects = function(props) {
     <>
       <div className={darkMode ? 'bg-oxford-blue text-light' : ''}>
         <div className="container py-3">
-          {fetching || !fetched ? <Loading /> : null}
+          {fetching || !fetched ? <Loading align="center" /> : null}
           <div className="d-flex align-items-center">
           <h3 style={{ display: 'inline-block', marginRight: 10 }}>Projects</h3>
           <EditableInfoModal