admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

show loading spinner when modifying a project from the dropdown

Browse Source 
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.
This commit is contained in:
Pramod Mahajan 2025-05-04 18:58:39 +05:30
parent a96fa8efc7
commit e86d43c6e9
1 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/Project/ProjectCard.jsx
View File

@ -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 { getProjectStatusColor,getProjectStatusName } from "../../utils/projectStatus";
import { MANAGE_PROJECT } from "../../utils/constants";
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,9 +69,11 @@ const ProjectCard = ({ projectData }) => {
if (projects_list) {
const updatedProjectsList = projects_list.map((project) =>
project.id === projectInfo.id
? { ...project, ...response.data,
// tenant: project.tenant
}
? {
...project,
...response.data,
// tenant: project.tenant
}
: project
);
cacheData("projectslist", updatedProjectsList);
@ -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,14 +150,17 @@ const ProjectCard = ({ projectData }) => {
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i
className="bx bx-dots-vertical-rounded bx-sm text-muted"
data-bs-toggle="tooltip"
data-bs-offset="0,8"
data-bs-placement="top"
data-bs-custom-class="tooltip-dark"
title="More Action"
></i>
{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"
data-bs-offset="0,8"
data-bs-placement="top"
data-bs-custom-class="tooltip-dark"
title="More Action"
></i>}
</button>
<ul className="dropdown-menu dropdown-menu-end">
<li>