From 63f9f16ca65421628879d3ba1fc03037fb74ab27 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Fri, 1 May 2026 10:06:15 +0800
Subject: [PATCH] feat: add loading state to DataGrid component for better user
 feedback during SQL execution

---
 src/App.vue                      | 3 ++-
 src/components/grid/DataGrid.vue | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index d3ca75034..897f872bd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -940,7 +940,7 @@ async function setupFileDrop() {
                 </Pane>
                 <Pane :size="60" :min-size="20">
                   <div class="h-full flex flex-col">
-                    <DataGrid v-if="activeTab.result" :key="activeTab.id" class="flex-1 min-h-0" :result="activeTab.result" :sql="activeTab.lastExecutedSql || activeTab.sql" />
+                    <DataGrid v-if="activeTab.result" :key="activeTab.id" class="flex-1 min-h-0" :result="activeTab.result" :sql="activeTab.lastExecutedSql || activeTab.sql" :loading="activeTab.isExecuting" />
                     <div v-else-if="activeTab.isExecuting" class="flex-1 min-h-0 flex flex-col items-center justify-center gap-3 text-muted-foreground text-sm">
                       <div class="flex items-center">
                         <Loader2 class="h-5 w-5 animate-spin mr-2" />
@@ -963,6 +963,7 @@ async function setupFileDrop() {
                   :key="activeTab.id"
                   :result="activeTab.result"
                   :sql="activeTab.sql"
+                  :loading="activeTab.isExecuting"
                   :editable="!!activeTab.tableMeta?.primaryKeys?.length"
                   :database-type="activeConnection?.db_type"
                   :connection-id="activeTab.connectionId"
diff --git a/src/components/grid/DataGrid.vue b/src/components/grid/DataGrid.vue
index 3d0f9da3f..bc3aeafde 100644
--- a/src/components/grid/DataGrid.vue
+++ b/src/components/grid/DataGrid.vue
@@ -42,6 +42,7 @@ const props = defineProps<{
     columns: ColumnInfo[];
     primaryKeys: string[];
   };
+  loading?: boolean;
   onExecuteSql?: (sql: string) => Promise<void>;
 }>();
 
@@ -995,6 +996,7 @@ function escapeAndHighlightKeywords(s: string): string {
       </template>
 
       <span class="ml-auto flex items-center gap-1">
+        <Loader2 v-if="loading" class="w-3 h-3 animate-spin text-muted-foreground" />
         <DropdownMenu>
           <DropdownMenuTrigger as-child>
             <Button variant="ghost" size="sm" class="h-5 text-xs px-1.5">