From cd33e2ffa9f251f5ed8d4818db5972432e4a9a13 Mon Sep 17 00:00:00 2001
From: Akshit Sharma <sharma89@illinois.edu>
Date: Sat, 22 Jun 2024 14:19:00 -0500
Subject: [PATCH 1/2] add loading circle

---
 src/actions/projectMembers.js               | 19 +++---
 src/components/Projects/Members/Members.jsx | 65 ++++++++++++---------
 src/components/Projects/Members/members.css |  3 +
 3 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/src/actions/projectMembers.js b/src/actions/projectMembers.js
index 198296aa80..aa402a1ed1 100644
--- 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
index 58ac5a9555..174532aad8 100644
--- 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' : ''}`}>
-            <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 /> ) : (
+            <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
index c87a484c3d..c3408751e8 100644
--- a/src/components/Projects/Members/members.css
+++ b/src/components/Projects/Members/members.css
@@ -32,3 +32,6 @@
   width: 20px;
   text-align: center;
 }
+
+
+

From 0c4f9487ccc24b8ec90c72e3707ee8b630225b3a Mon Sep 17 00:00:00 2001
From: Akshit Sharma <sharma89@illinois.edu>
Date: Thu, 18 Jul 2024 20:06:07 -0500
Subject: [PATCH 2/2] loading circle center

---
 src/components/Projects/Members/Members.jsx | 2 +-
 src/components/Projects/Projects.jsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Projects/Members/Members.jsx b/src/components/Projects/Members/Members.jsx
index 174532aad8..202f5aa5cd 100644
--- a/src/components/Projects/Members/Members.jsx
+++ b/src/components/Projects/Members/Members.jsx
@@ -191,7 +191,7 @@ const Members = props => {
             handleUserProfile={handleToggle}
           />
 
-          {isLoading ? ( <Loading /> ) : (
+          {isLoading ? ( <Loading align="center" /> ) : (
             <table className={`table table-bordered table-responsive-sm ${darkMode ? 'text-light' : ''}`}>
               <thead>
                 <tr className={darkMode ? 'bg-space-cadet' : ''}>
diff --git a/src/components/Projects/Projects.jsx b/src/components/Projects/Projects.jsx
index cfb189adc3..9a5fadc830 100644
--- a/src/components/Projects/Projects.jsx
+++ b/src/components/Projects/Projects.jsx
@@ -150,7 +150,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