feat: add loading state to DataGrid component for better user feedback during SQL execution
This commit is contained in:
parent
e6be189992
commit
63f9f16ca6
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue