fix(dialog): keep drop database confirmation loading

apps/desktop/src/components/editor/DangerConfirmDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import { AlertTriangle } from "@lucide/vue";
+import { AlertTriangle, Loader2 } from "@lucide/vue";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
@@ -23,6 +23,8 @@ const props = withDefaults(
     confirmLabel?: string;
     showSuppressToggle?: boolean;
     suppressToggleLabel?: string;
+    loading?: boolean;
+    closeOnConfirm?: boolean;
   }>(),
   {
     sql: "",
@@ -32,6 +34,8 @@ const props = withDefaults(
     confirmLabel: "",
     showSuppressToggle: false,
     suppressToggleLabel: "",
+    loading: false,
+    closeOnConfirm: true,
   },
 );
 
@@ -41,15 +45,23 @@ const emit = defineEmits<{
 
 const code = computed(() => props.details || props.sql);
 const highlightedCode = computed(() => highlight(code.value));
+const dialogOpen = computed({
+  get: () => open.value,
+  set: (value) => {
+    if (props.loading && !value) return;
+    open.value = value;
+  },
+});
 
 function onConfirm() {
-  open.value = false;
+  if (props.loading) return;
+  if (props.closeOnConfirm) open.value = false;
   emit("confirm");
 }
 </script>
 
 <template>
-  <Dialog v-model:open="open">
+  <Dialog v-model:open="dialogOpen">
     <DialogContent class="sm:max-w-[480px]">
       <DialogHeader>
         <DialogTitle class="flex items-center gap-2 text-destructive">
@@ -68,8 +80,11 @@ function onConfirm() {
       </div>
 
       <DialogFooter>
-        <Button variant="outline" @click="open = false">{{ t("dangerDialog.cancel") }}</Button>
-        <Button variant="destructive" @click="onConfirm">{{ confirmLabel || t("dangerDialog.confirm") }}</Button>
+        <Button variant="outline" :disabled="loading" @click="open = false">{{ t("dangerDialog.cancel") }}</Button>
+        <Button variant="destructive" class="gap-1.5" :disabled="loading" @click="onConfirm">
+          <Loader2 v-if="loading" class="h-3.5 w-3.5 animate-spin" />
+          {{ confirmLabel || t("dangerDialog.confirm") }}
+        </Button>
       </DialogFooter>
     </DialogContent>
   </Dialog>

apps/desktop/src/components/sidebar/TreeItem.vue

@@ -1209,6 +1209,7 @@ const createDatabaseName = ref("");
 const createDatabaseCharset = ref("utf8mb4");
 const createDatabaseCollation = ref("utf8mb4_unicode_ci");
 const showDropDatabaseConfirm = ref(false);
+const dropDatabaseLoading = ref(false);
 const showFlushRedisDbConfirm = ref(false);
 const showCreateSchemaDialog = ref(false);
 const createSchemaName = ref("");
@@ -1882,6 +1883,7 @@ async function confirmCreateDatabase() {
 
 function dropDatabase() {
   void refreshDropDatabasePreviewSql();
+  dropDatabaseLoading.value = false;
   showDropDatabaseConfirm.value = true;
 }
 
@@ -1909,7 +1911,8 @@ async function confirmFlushRedisDb() {
 
 async function confirmDropDatabase() {
   const node = props.node;
-  if (!node.connectionId) return;
+  if (!node.connectionId || dropDatabaseLoading.value) return;
+  dropDatabaseLoading.value = true;
   try {
     await connectionStore.ensureConnected(node.connectionId);
     const sql =
@@ -1921,8 +1924,11 @@ async function confirmDropDatabase() {
     await api.executeQuery(node.connectionId, "", sql);
     toast(t("contextMenu.dropDatabaseSuccess", { name: node.label }), 3000);
     await connectionStore.loadDatabases(node.connectionId, { force: true });
+    showDropDatabaseConfirm.value = false;
   } catch (e: any) {
     toast(t("contextMenu.tableOperationFailed", { message: e?.message || String(e) }), 5000);
+  } finally {
+    dropDatabaseLoading.value = false;
   }
 }
 
@@ -3649,7 +3655,16 @@ function treeItemMenuItems(): ContextMenuItem[] {
     </DialogContent>
   </Dialog>
 
-  <DangerConfirmDialog v-model:open="showDropDatabaseConfirm" :title="t('contextMenu.confirmDropDatabaseTitle')" :message="t('contextMenu.confirmDropDatabaseMessage', { name: node.label })" :sql="dropDatabasePreviewSql" :confirm-label="t('contextMenu.dropDatabase')" @confirm="confirmDropDatabase" />
+  <DangerConfirmDialog
+    v-model:open="showDropDatabaseConfirm"
+    :title="t('contextMenu.confirmDropDatabaseTitle')"
+    :message="t('contextMenu.confirmDropDatabaseMessage', { name: node.label })"
+    :sql="dropDatabasePreviewSql"
+    :confirm-label="t('contextMenu.dropDatabase')"
+    :loading="dropDatabaseLoading"
+    :close-on-confirm="false"
+    @confirm="confirmDropDatabase"
+  />
 
   <DangerConfirmDialog v-model:open="showFlushRedisDbConfirm" :title="t('redis.flushDb')" :message="t('redis.flushDbMessage')" :details="t('redis.flushDbDetails', { db: node.database })" :confirm-label="t('redis.flushDbConfirm')" @confirm="confirmFlushRedisDb" />