Further UI Improvements

client/src/components/job-employee-assignments/job-employee-assignments.container.jsx

@@ -1,16 +1,18 @@
 import { useMutation } from "@apollo/client";
 import { notification } from "antd";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import JobEmployeeAssignmentsComponent from "./job-employee-assignments.component";
-import { logImEXEvent } from "../../firebase/firebase.utils";
 
 export default function JobEmployeeAssignmentsContainer({ job, refetch }) {
   const { t } = useTranslation();
   const [updateJob] = useMutation(UPDATE_JOB);
+  const [loading, setLoading] = useState(false);
 
   const handleAdd = async (assignment) => {
+    setLoading(true);
     const { operation, employeeid } = assignment;
     logImEXEvent("job_assign_employee", { operation });
 
@@ -30,8 +32,10 @@ export default function JobEmployeeAssignmentsContainer({ job, refetch }) {
         }),
       });
     }
+    setLoading(false);
   };
   const handleRemove = async (operation) => {
+    setLoading(true);
     logImEXEvent("job_unassign_employee", { operation });
 
     let empAssignment = determineFieldName(operation);
@@ -48,6 +52,7 @@ export default function JobEmployeeAssignmentsContainer({ job, refetch }) {
         }),
       });
     }
+    setLoading(false);
   };
 
   return (
@@ -58,6 +63,7 @@ export default function JobEmployeeAssignmentsContainer({ job, refetch }) {
         prep={job.employee_prep_rel}
         handleAdd={handleAdd}
         handleRemove={handleRemove}
+        loading={loading}
       />
     </div>
   );