From 148f4b79e7d5f26ee3f65b76a2129a632e8f3dc5 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Sun, 4 May 2025 19:38:32 +0530
Subject: [PATCH]  added loading indicator for project employee list during API
 call

---
 src/components/Project/Teams.jsx | 41 +++++++++++++++++++-------------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/components/Project/Teams.jsx b/src/components/Project/Teams.jsx
index fe554574..e6029987 100644
--- a/src/components/Project/Teams.jsx
+++ b/src/components/Project/Teams.jsx
@@ -21,21 +21,27 @@ const Teams = ({ project }) => {
   const [employees, setEmployees] = useState([]);
   const [filteredEmployees, setFilteredEmployees] = useState([]);
   const [ removingEmployeeId, setRemovingEmployeeId ] = useState( null );
-  const [assignedLoading,setAssignedLoading]= useState(false)
+  const [ assignedLoading, setAssignedLoading ] = useState( false )
+  const [employeeLodaing,setEmployeeLoading] = useState(false)
 
   const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
 
   const fetchEmployees = async () => {
-    try {
+    try
+    {
+      setEmployeeLoading(true)
+      
       // if (!empRoles) {
       ProjectRepository.getProjectAllocation(project.id)
         .then((response) => {
           setEmployees(response.data);
-          setFilteredEmployees(response.data.filter((emp) => emp.isActive));
+          setFilteredEmployees( response.data.filter( ( emp ) => emp.isActive ) );
+          setEmployeeLoading(false)
         })
         .catch((error) => {
           console.error(error);
-          setError("Failed to fetch data.");
+          setError( "Failed to fetch data." );
+          setEmployeeLoading(false)
         });
     } catch (err) {
       setError("Failed to fetch activities.");
@@ -184,7 +190,8 @@ const Teams = ({ project }) => {
             </div>
           </div>
           <div className="table-responsive text-nowrap">
-            {employees && employees.length > 0 ? (
+            {employeeLodaing && (<p>Loading..</p>)}
+            {!employeeLodaing && employees && employees.length > 0 && (
               <table className="table ">
                 <thead>
                   <tr>
@@ -197,7 +204,7 @@ const Teams = ({ project }) => {
                 </thead>
                 <tbody className="table-border-bottom-0">
                   {filteredEmployees &&
-                    filteredEmployees.map((item) => (
+                    filteredEmployees.map( ( item ) => (
                       <tr key={item.id}>
                         <td>
                           <div className="d-flex justify-content-start align-items-center">
@@ -208,7 +215,8 @@ const Teams = ({ project }) => {
                             <div className="d-flex flex-column">
                               <a
                                 href="#"
-                                onClick={(e) => {
+                                onClick={( e ) =>
+                                {
                                   e.preventDefault(); // Prevent default link behavior
                                   window.location.href =
                                     "/employee/" + item.employee.id;
@@ -224,20 +232,20 @@ const Teams = ({ project }) => {
                         </td>
                         <td>
                           {" "}
-                          {moment(item.allocationDate).format(
+                          {moment( item.allocationDate ).format(
                             "DD-MMM-YYYY"
                           )}{" "}
                         </td>
                         <td>
                           {item.reAllocationDate
-                            ? moment(item.reAllocationDate).format(
-                                "DD-MMM-YYYY"
-                              )
+                            ? moment( item.reAllocationDate ).format(
+                              "DD-MMM-YYYY"
+                            )
                             : "Present"}
                         </td>
                         <td>
                           <span className="badge bg-label-primary me-1">
-                            {getRole(item.jobRoleId)}
+                            {getRole( item.jobRoleId )}
                           </span>
                         </td>
                         <td>
@@ -247,7 +255,7 @@ const Teams = ({ project }) => {
                               type="button"
                               title="Remove from project"
                               className="btn p-0 dropdown-toggle hide-arrow"
-                              onClick={() => removeAllocation(item)}
+                              onClick={() => removeAllocation( item )}
                             >
                               {" "}
                               {removingEmployeeId === item.id ? <div
@@ -255,17 +263,18 @@ const Teams = ({ project }) => {
                                 role="status"
                               >
                                 <span class="visually-hidden">Loading...</span>
-                              </div>:<i className="bx bx-trash me-1 text-danger"></i>} 
+                              </div> : <i className="bx bx-trash me-1 text-danger"></i>}
                               
                             </button>
                           )}
                           {!item.isActive && <span>Not in project</span>}
                         </td>
                       </tr>
-                    ))}
+                    ) )}
                 </tbody>
               </table>
-            ) : (
+            )}
+            {(!employeeLodaing && employees.length == 0 ) && (
               <span>No employees assigned to the project</span>
             )}
           </div>