added loading indicator for project employee list during API call

src/components/Project/Teams.jsx

@@ -22,20 +22,26 @@ const Teams = ({ project }) => {
   const [filteredEmployees, setFilteredEmployees] = useState([]);
   const [ removingEmployeeId, setRemovingEmployeeId ] = useState( null );
   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 ) );
+          setEmployeeLoading(false)
         })
         .catch((error) => {
           console.error(error);
           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>
@@ -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;
@@ -265,7 +273,8 @@ const Teams = ({ project }) => {
                     ) )}
                 </tbody>
               </table>
-            ) : (
+            )}
+            {(!employeeLodaing && employees.length == 0 ) && (
               <span>No employees assigned to the project</span>
             )}
           </div>