feat: add loading state to DataGrid component for better user feedback during SQL execution

This commit is contained in:
t8y2 2026-05-01 10:06:15 +08:00
parent e6be189992
commit 63f9f16ca6
2 changed files with 4 additions and 1 deletions

View File

@ -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"

View File

@ -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">