show loading spinner when modifying a project from the dropdown

Previously, clicking "Modify" in the project card dropdown would close the dropdown with no immediate feedback while the API call was in progress. Now, a loading spinner is shown to indicate that the modal is being prepared.

src/components/Project/ProjectCard.jsx

@@ -8,8 +8,11 @@ import ProjectRepository from "../../repositories/ProjectRepository";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import {MANAGE_PROJECT} from "../../utils/constants";
+import { MANAGE_PROJECT } from "../../utils/constants";
-import { getProjectStatusColor,getProjectStatusName } from "../../utils/projectStatus";
+import {
+  getProjectStatusColor,
+  getProjectStatusName,
+} from "../../utils/projectStatus";
 
 const ProjectCard = ({ projectData }) => {
   const [projectInfo, setProjectInfo] = useState(projectData);
@@ -17,13 +20,16 @@ const ProjectCard = ({ projectData }) => {
   const [showModal, setShowModal] = useState(false);
   const navigate = useNavigate();
   const ManageProject = useHasUserPermission(MANAGE_PROJECT);
+  const [modifyProjectLoading, setMdifyProjectLoading] = useState(false);
 
   const handleShow = async () => {
     try {
+      setMdifyProjectLoading(true);
       const response = await ProjectRepository.getProjectByprojectId(
         projectInfo.id
       );
       setProjectDetails(response.data);
+      setMdifyProjectLoading(false);
       setShowModal(true);
     } catch (error) {
       showToast("Failed to load project details", "error");
@@ -39,7 +45,6 @@ const ProjectCard = ({ projectData }) => {
 
   const handleClose = () => setShowModal(false);
 
-
   const handleViewProject = () => {
     navigate(`/projects/${projectData.id}`);
   };
@@ -64,7 +69,9 @@ const ProjectCard = ({ projectData }) => {
           if (projects_list) {
             const updatedProjectsList = projects_list.map((project) =>
               project.id === projectInfo.id
-                ? { ...project, ...response.data, 
+                ? {
+                    ...project,
+                    ...response.data,
                     // tenant: project.tenant
                   }
                 : project
@@ -81,6 +88,16 @@ const ProjectCard = ({ projectData }) => {
     }
   };
 
+  const handleModify = async (e) => {
+    e.stopPropagation(); // prevent event bubbling
+    setLoading(true);
+    try {
+      await handleShow(); // call your API or async function
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <>
       {showModal && projectDetails && (
@@ -133,6 +150,9 @@ const ProjectCard = ({ projectData }) => {
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
                   >
+                    {modifyProjectLoading? <div class="spinner-border spinner-border-sm text-secondary" role="status">
+                      <span class="visually-hidden">Loading...</span>
+                    </div> :
                       <i
                         className="bx bx-dots-vertical-rounded bx-sm text-muted"
                         data-bs-toggle="tooltip"
@@ -140,7 +160,7 @@ const ProjectCard = ({ projectData }) => {
                         data-bs-placement="top"
                         data-bs-custom-class="tooltip-dark"
                         title="More Action"
-                    ></i>
+                      ></i>}
                   </button>
                   <ul className="dropdown-menu dropdown-menu-end">
                     <li>