Display loader on deleting deployment

packages/frontend/src/components/projects/Dialog/DeleteDeploymentDialog.tsx

@@ -1,22 +1,36 @@
 import ConfirmDialog, {
   ConfirmDialogProps,
 } from 'components/shared/ConfirmDialog';
+import { ArrowRightCircleFilledIcon, LoadingIcon } from 'components/shared/CustomIcon';
+
+interface DeleteDeploymentDialogProps extends ConfirmDialogProps {
+  isConfirmButtonLoading?: boolean;
+}
 
 export const DeleteDeploymentDialog = ({
   open,
   handleCancel,
   handleConfirm,
+  isConfirmButtonLoading,
   ...props
-}: ConfirmDialogProps) => {
+}: DeleteDeploymentDialogProps) => {
   return (
     <ConfirmDialog
       {...props}
       dialogTitle="Delete deployment?"
       handleCancel={handleCancel}
       open={open}
-      confirmButtonTitle="Yes, delete deployment"
+      confirmButtonTitle={isConfirmButtonLoading ? "Deleting deployment" : "Yes, delete deployment"}
       handleConfirm={handleConfirm}
-      confirmButtonProps={{ variant: 'danger' }}
+      confirmButtonProps={{
+        variant: 'danger',
+        disabled: isConfirmButtonLoading,
+        rightIcon: isConfirmButtonLoading ? (
+          <LoadingIcon className="animate-spin" />
+        ) : (
+          <ArrowRightCircleFilledIcon />
+        ),
+      }}
     >
       <p className="text-sm text-elements-high-em">
         Once deleted, the deployment will not be accessible.

packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx

@@ -48,6 +48,7 @@ export const DeploymentMenu = ({
   const [changeToProduction, setChangeToProduction] = useState(false);
   const [redeployToProduction, setRedeployToProduction] = useState(false);
   const [deleteDeploymentDialog, setDeleteDeploymentDialog] = useState(false);
+  const [isConfirmDeleteLoading, setIsConfirmDeleteLoading] = useState(false);
   const [rollbackDeployment, setRollbackDeployment] = useState(false);
   const [assignDomainDialog, setAssignDomainDialog] = useState(false);
   const [isConfirmButtonLoading, setConfirmButtonLoadingLoading] =
@@ -118,16 +119,11 @@ export const DeploymentMenu = ({
   };
 
   const deleteDeployment = async () => {
-    toast({
+    const isDeleted = await client.deleteDeployment(deployment.id);
-      id: 'deleting_deployment',
-      title: 'Deleting deployment....',
-      variant: 'success',
-      onDismiss: dismiss,
-    });
 
+    setIsConfirmDeleteLoading(false);
     setDeleteDeploymentDialog((preVal) => !preVal);
 
-    const isDeleted = await client.deleteDeployment(deployment.id);
     if (isDeleted) {
       await onUpdate();
       toast({
@@ -271,8 +267,12 @@ export const DeploymentMenu = ({
       />
       <DeleteDeploymentDialog
         open={deleteDeploymentDialog}
-        handleConfirm={deleteDeployment}
+        handleConfirm={async () => {
+          setIsConfirmDeleteLoading(true);
+          await deleteDeployment();
+        }}
         handleCancel={() => setDeleteDeploymentDialog((preVal) => !preVal)}
+        isConfirmButtonLoading={isConfirmDeleteLoading}
       />
     </>
   );