fix: adding loader for Delete and Save buttons (#1344)

Co-authored-by: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyMenuBar.tsx

@@ -45,6 +45,8 @@ export default function SurveyMenuBar({
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isConfirmDialogOpen, setConfirmDialogOpen] = useState(false);
   const [isMutatingSurvey, setIsMutatingSurvey] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
   let faultyQuestions: String[] = [];
 
   useEffect(() => {
@@ -339,10 +341,20 @@ export default function SurveyMenuBar({
           deleteWhat="Draft"
           open={isDeleteDialogOpen}
           setOpen={setDeleteDialogOpen}
-          onDelete={() => deleteSurvey(localSurvey.id)}
+          onDelete={async () => {
+            setIsDeleting(true);
+            await deleteSurvey(localSurvey.id);
+            setIsDeleting(false);
+          }}
           text="Do you want to delete this draft?"
+          isDeleting={isDeleting}
+          isSaving={isSaving}
           useSaveInsteadOfCancel={true}
-          onSave={() => saveSurveyAction(true)}
+          onSave={async () => {
+            setIsSaving(true);
+            await saveSurveyAction(true);
+            setIsSaving(false);
+          }}
         />
         <AlertDialog
           confirmWhat="Survey changes"

packages/ui/DeleteDialog/index.tsx

@@ -10,6 +10,7 @@ interface DeleteDialogProps {
   onDelete: () => void;
   text?: string;
   isDeleting?: boolean;
+  isSaving?: boolean;
   useSaveInsteadOfCancel?: boolean;
   onSave?: () => void;
   children?: React.ReactNode;
@@ -23,6 +24,7 @@ export function DeleteDialog({
   onDelete,
   text,
   isDeleting,
+  isSaving,
   useSaveInsteadOfCancel = false,
   onSave,
   children,
@@ -34,6 +36,7 @@ export function DeleteDialog({
       <div>{children}</div>
       <div className="space-x-2 text-right">
         <Button
+          loading={isSaving}
           variant="secondary"
           onClick={() => {
             if (useSaveInsteadOfCancel && onSave) {