From c86a06ddbb1f200286d2832243eb7e3ac0047d94 Mon Sep 17 00:00:00 2001
From: Shyam Raghuwanshi <94217498+shyamraghu@users.noreply.github.com>
Date: Sun, 22 Oct 2023 14:31:18 +0530
Subject: [PATCH] fix: adding loader for Delete and Save buttons (#1344)

Co-authored-by: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
---
 .../[surveyId]/edit/components/SurveyMenuBar.tsx | 16 ++++++++++++++--
 packages/ui/DeleteDialog/index.tsx               |  3 +++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyMenuBar.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyMenuBar.tsx
index 7587fa4267..d9eae8bd8d 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyMenuBar.tsx
+++ b/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"
diff --git a/packages/ui/DeleteDialog/index.tsx b/packages/ui/DeleteDialog/index.tsx
index b0c25ab9e6..3052c5fb22 100644
--- a/packages/ui/DeleteDialog/index.tsx
+++ b/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) {