added loading behaviour for submitting form

src/components/Project/AssignTask.jsx

@@ -33,7 +33,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
         .int()
         .positive({ message: "Planned task must be a positive number" })
         .max(maxPlanned, {
-         
           message: `Planned task cannot exceed ${maxPlanned}`,
         })
     ),
@@ -42,6 +41,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
   const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false);
   const helpPopupRefTarget = useRef(null);
   const [isHelpVisible, setIsHelpVisible] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Refs for Bootstrap Popovers
   const infoRef = useRef(null);
@@ -151,7 +151,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
   // Form submission handler
   const onSubmit = async (data) => {
     const selectedEmployeeIds = data.selectedEmployees;
-
+    setIsSubmitting(true);
     // Prepare taskTeam data (only IDs are needed for the backend based on previous context)
     const taskTeamWithDetails = selectedEmployeeIds
       .map((empId) => {
@@ -169,10 +169,11 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     };
 
     try {
-      // Call API to assign task
-     // Close the modal
+      await TasksRepository.assignTask(formattedData);
+      setIsSubmitting(false);
+      closedModel();
     } catch (error) {
-      console.error("Error assigning task:", error); 
+      setIsSubmitting(false);
       showToast("Something went wrong. Please try again.", "error");
     }
   };
@@ -183,7 +184,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     onClose();
   };
   return (
- 
     <div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
       <p className="align-items-center flex-wrap m-0 ">Assign Task</p>
       <div className="container my-3">
@@ -195,8 +195,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 assignData?.building?.name,
                 assignData?.floor?.floorName,
                 assignData?.workArea?.areaName,
-                      assignData?.workItem?.workItem?.activityMaster
-                        ?.activityName,
+                assignData?.workItem?.workItem?.activityMaster?.activityName,
               ]
                 .filter(Boolean) // Filter out any undefined/null values
                 .map((item, index, array) => (
@@ -288,9 +287,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                                       type="checkbox"
                                       id={`employee-${emp?.id}`}
                                       value={emp.id}
-                                            checked={field.value?.includes(
-                                              emp.id
-                                            )}
+                                      checked={field.value?.includes(emp.id)}
                                       onChange={(e) => {
                                         handleCheckboxChange(e, emp);
                                       }}
@@ -341,9 +338,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                   <div className="mt-1">
                     <div className="text-start px-2">
                       {watch("selectedEmployees")?.map((empId) => {
-                              const emp = employees.find(
-                                (emp) => emp.id === empId
-                              );
+                        const emp = employees.find((emp) => emp.id === empId);
                         return (
                           emp && (
                             <span
@@ -407,9 +402,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                         }
                       </u>
                     </label>
-                          <div
-                            style={{ display: "flex", alignItems: "center" }}
-                          >
+                    <div style={{ display: "flex", alignItems: "center" }}>
                       <div
                         ref={infoRef}
                         tabIndex="0"
@@ -544,16 +537,18 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 )}
               />
               {errors.description && (
-                      <div className="danger-text">
-                        {errors.description.message}
-                      </div>
+                <div className="danger-text">{errors.description.message}</div>
               )}
             </div>
 
             {/* Submit and Cancel buttons */}
             <div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
-                    <button type="submit" className="btn btn-sm btn-primary ">
-                      Submit
+              <button
+                type="submit"
+                className="btn btn-sm btn-primary "
+                disabled={(isSubmitting, loading)}
+              >
+                {isSubmitting ? "Please Wait" : "Submit"}
               </button>
               <button
                 type="reset"
@@ -561,6 +556,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 data-bs-dismiss="modal"
                 aria-label="Close"
                 onClick={closedModel}
+                disabled={isSubmitting || loading}
               >
                 Cancel
               </button>
@@ -569,7 +565,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
         </div>
       </div>
     </div>
-  
   );
 };