clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-05-02 05:46:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: replace LazyMonacoEditor with async MonacoEditor component and update loading fallback

Browse Source
This commit is contained in:
Pranav C
2025-10-07 22:30:52 +00:00
parent 2dac15f8c5
commit c3ba80ca01
9 changed files with 194 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/nc-gui/components/workspace/integrations/forms/EditOrAdd/Database/index.vue
View File

@@ -3,6 +3,7 @@ import { Form } from 'ant-design-vue'
import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
import { diff } from 'deep-object-diff'
import { IntegrationsType, validateAndExtractSSLProp } from 'nocodb-sdk'
import { defineAsyncComponent } from 'vue'
import {
type CertTypes,
ClientType,
@@ -15,6 +16,9 @@ import {
clientTypes as _clientTypes,
} from '#imports'
// Define Monaco Editor as an async component
const MonacoEditor = defineAsyncComponent(() => import('~/components/monaco/Editor.vue'))
const props = defineProps<{
open: boolean
connectionType?: ClientType
@@ -1191,10 +1195,17 @@ watch(
<div class="border-1 border-gray-200 !rounded-lg shadow-sm overflow-hidden">
<Suspense>
<template #default>
<LazyMonacoEditor v-model="customJsonFormState" class="nc-connection-json-editor h-[400px] w-full" />
<MonacoEditor v-model="customJsonFormState" class="nc-connection-json-editor h-[400px] w-full" />
</template>
<template #fallback>
<MonacoLoading height="h-[400px]" />
<div class="h-[400px] w-full flex items-center justify-center bg-gray-50 dark:bg-gray-900">
<div class="text-center">
<a-spin size="large" />
<div class="mt-4 text-gray-600 dark:text-gray-400">
Loading Monaco Editor...
</div>
</div>
</div>
</template>
</Suspense>
</div>