Add Loading State to Action Delete & Person Delete Buttons

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/ActionSettingsTab.tsx

@@ -42,6 +42,7 @@ export default function ActionSettingsTab({ environmentId, actionClass, setOpen
     },
   });
   const [isUpdatingAction, setIsUpdatingAction] = useState(false);
+  const [isDeletingAction, setIsDeletingAction] = useState(false);
 
   const onSubmit = async (data) => {
     const filteredNoCodeConfig = filterNoCodeConfig(data.noCodeConfig as NoCodeConfig);
@@ -81,6 +82,20 @@ export default function ActionSettingsTab({ environmentId, actionClass, setOpen
     if (match === "no") toast.error("Your survey would not be shown.");
   };
 
+  const handleDeleteAction = async () => {
+    try {
+      setIsDeletingAction(true);
+      await deleteActionClass(environmentId, actionClass.id);
+      router.refresh();
+      toast.success("Action deleted successfully");
+      setOpen(false);
+    } catch (error) {
+      toast.error("Something went wrong. Please try again.");
+    } finally {
+      setIsDeletingAction(false);
+    }
+  };
+
   return (
     <div>
       <form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
@@ -288,18 +303,10 @@ export default function ActionSettingsTab({ environmentId, actionClass, setOpen
       <DeleteDialog
         open={openDeleteDialog}
         setOpen={setOpenDeleteDialog}
+        isDeleting={isDeletingAction}
         deleteWhat={"Action"}
         text="Are you sure you want to delete this action? This also removes this action as a trigger from all your surveys."
-        onDelete={async () => {
-          setOpen(false);
-          try {
-            await deleteActionClass(environmentId, actionClass.id);
-            router.refresh();
-            toast.success("Action deleted successfully");
-          } catch (error) {
-            toast.error("Something went wrong. Please try again.");
-          }
-        }}
+        onDelete={handleDeleteAction}
       />
     </div>
   );

apps/web/app/(app)/environments/[environmentId]/people/[personId]/HeadingSection.tsx

@@ -19,10 +19,19 @@ export default function HeadingSection({
   const router = useRouter();
 
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isDeletingPerson, setIsDeletingPerson] = useState(false);
+
   const handleDeletePerson = async () => {
-    await deletePersonAction(person.id);
-    router.push(`/environments/${environmentId}/people`);
-    toast.success("Person deleted successfully.");
+    try {
+      setIsDeletingPerson(true);
+      await deletePersonAction(person.id);
+      router.push(`/environments/${environmentId}/people`);
+      toast.success("Person deleted successfully.");
+    } catch (error) {
+      toast.error(error.message);
+    } finally {
+      setIsDeletingPerson(false);
+    }
   };
 
   return (
@@ -46,6 +55,7 @@ export default function HeadingSection({
         setOpen={setDeleteDialogOpen}
         deleteWhat="person"
         onDelete={handleDeletePerson}
+        isDeleting={isDeletingPerson}
       />
     </>
   );