CE-3438: Add error and loading states IOCDelete

Had to update common component

src/components/IOC/IOCDelete/IOCDelete.jsx

@@ -11,8 +11,7 @@ export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => {
   const navigate = useNavigate();
   const showSnackBar = useCustomSnackbar();
   const [open, setOpen] = useState(false);
-  const [deleteIOC, { data: deletedIoc, isLoading, error, reset }] =
-    useDeleteIocMutation();
+  const [deleteIOC, { isLoading, error, reset }] = useDeleteIocMutation();
 
   let disabledButtonTitle = "";
 
@@ -22,15 +21,9 @@ export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => {
   }
 
   const onClose = useCallback(() => {
+    reset();
     setOpen(false);
-  }, [setOpen]);
-
-  useEffect(() => {
-    if (deletedIoc) {
-      showSnackBar(`IOC ${ioc.namingName} deleted`, "success");
-      navigate("/iocs", { replace: true });
-    }
-  }, [deletedIoc, ioc.namingName, navigate, showSnackBar]);
+  }, [setOpen, reset]);
 
   useEffect(() => {
     if (error) {
@@ -41,8 +34,23 @@ export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => {
   const onConfirm = useCallback(async () => {
     reset();
     setButtonDisabled(true);
-    deleteIOC({ iocId: ioc.id });
-  }, [ioc, deleteIOC, setButtonDisabled, reset]);
+    try {
+      await deleteIOC({ iocId: ioc.id }).unwrap();
+      showSnackBar(`IOC ${ioc.namingName} deleted`, "success");
+      navigate("/iocs", { replace: true });
+    } catch (err) {
+      showSnackBar(getErrorMessage(err), "error");
+      setButtonDisabled(false);
+    }
+  }, [
+    reset,
+    setButtonDisabled,
+    deleteIOC,
+    ioc.id,
+    ioc.namingName,
+    showSnackBar,
+    navigate
+  ]);
 
   return (
     <>