refactor(nc-gui): use lazy load

packages/nc-gui/components/erd/Flow.vue

@@ -4,8 +4,7 @@ import { Background, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
 import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import dagre from 'dagre'
-import TableNode from './TableNode.vue'
-import RelationEdge from './RelationEdge.vue'
+import { onScopeDispose, watch } from '#imports'
 
 interface Props {
   tables: any[]
@@ -200,11 +199,11 @@ watch([() => tables, () => config], init, { deep: true, flush: 'pre' })
     <Controls class="!left-auto right-2 !top-3.5 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
 
     <template #node-custom="props">
-      <TableNode :data="props.data" />
+      <LazyErdTableNode :data="props.data" />
     </template>
 
     <template #edge-custom="props">
-      <RelationEdge v-bind="props" />
+      <LazyErdRelationEdge v-bind="props" />
     </template>
 
     <Background />
@@ -218,6 +217,7 @@ watch([() => tables, () => config], init, { deep: true, flush: 'pre' })
         <MdiTableLarge class="text-primary" />
         <div>{{ $t('objects.table') }}</div>
       </div>
+
       <div class="flex flex-row items-center space-x-1 pt-1">
         <MdiEyeCircleOutline class="text-primary" />
         <div>{{ $t('objects.sqlVIew') }}</div>

packages/nc-gui/components/erd/RelationEdge.vue

@@ -101,6 +101,7 @@ export default {
     :d="edgePath"
     :marker-end="markerEnd"
   />
+
   <path
     :id="id"
     :style="style"
@@ -135,6 +136,7 @@ export default {
     :stroke-width="1.5"
     :transform="`rotate(45,${sourceX + 2},${sourceY - 4})`"
   />
+
   <rect
     v-if="isManyToMany"
     class="nc-erd-edge-rect"

packages/nc-gui/components/erd/TableNode.vue

@@ -4,6 +4,7 @@ import { Handle, Position } from '@braks/vue-flow'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
+import { MetaInj, computed, provide, toRefs, useNuxtApp } from '#imports'
 
 interface Props extends NodeProps {
   data: TableType & { showPkAndFk: boolean; showAllColumns: boolean }
@@ -58,6 +59,7 @@ const relatedColumnId = (col: Record<string, any>) =>
         </div>
       </div>
     </GeneralTooltip>
+
     <div>
       <div
         v-for="col in pkAndFkColumns"
@@ -65,7 +67,7 @@ const relatedColumnId = (col: Record<string, any>) =>
         class="w-full border-b-1 py-2 border-gray-100 keys"
         :class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
       >
-        <SmartsheetHeaderCell v-if="col" :column="col" :hide-menu="true" />
+        <LazySmartsheetHeaderCell v-if="col" :column="col" :hide-menu="true" />
       </div>
 
       <div class="w-full mb-1"></div>
@@ -93,16 +95,18 @@ const relatedColumnId = (col: Record<string, any>) =>
               type="target"
               :position="Position.Left"
             />
-            <SmartsheetHeaderVirtualCell :column="col" :hide-menu="true" />
+
+            <LazySmartsheetHeaderVirtualCell :column="col" :hide-menu="true" />
           </div>
-          <SmartsheetHeaderVirtualCell
+
+          <LazySmartsheetHeaderVirtualCell
             v-else-if="isVirtualCol(col)"
             :column="col"
             :hide-menu="true"
             :class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
           />
 
-          <SmartsheetHeaderCell
+          <LazySmartsheetHeaderCell
             v-else
             :column="col"
             :hide-menu="true"

packages/nc-gui/components/erd/View.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
+import { ref, useGlobal, useMetas, useProject, watch } from '#imports'
 
 const { table } = defineProps<{ table?: TableType }>()
 
 const { includeM2M } = useGlobal()
 
 const { tables: projectTables } = useProject()
-const tables = ref<TableType[]>([])
+
 const { metas, getMeta } = useMetas()
 
+const tables = ref<TableType[]>([])
+
 let isLoading = $ref(true)
 const showAdvancedOptions = ref(false)
 
@@ -105,8 +108,9 @@ watch(
         <a-spin size="large" />
       </div>
     </div>
+
     <div v-else class="relative h-full">
-      <ErdFlow :tables="tables" :config="config" />
+      <LazyErdFlow :tables="tables" :config="config" />
 
       <div
         class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1 nc-erd-context-menu z-50"

packages/nc-gui/components/smartsheet/Gallery.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { onMounted } from '@vue/runtime-core'
 import { isVirtualCol } from 'nocodb-sdk'
 import {
   ActiveViewInj,
@@ -14,16 +13,16 @@ import {
   ReadonlyInj,
   ReloadRowDataHookInj,
   ReloadViewMetaHookInj,
-  extractPkFromRow,
   computed,
   createEventHook,
+  extractPkFromRow,
   inject,
   nextTick,
+  onMounted,
   provide,
   ref,
   useUIPermission,
   useViewData,
-  watch,
 } from '#imports'
 import type { Row as RowType } from '~/lib'
 
@@ -94,7 +93,7 @@ const attachments = (record: any): Attachment[] => {
 const expandForm = (row: RowType, state?: Record<string, any>) => {
   if (!isUIAllowed('xcDatatableEditable')) return
 
-  const rowId = extractPkFromRow(row.row, meta.value.columns)
+  const rowId = extractPkFromRow(row.row, meta.value!.columns!)
 
   if (rowId) {
     router.push({
@@ -105,7 +104,7 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
     })
   } else {
     expandedFormRow.value = row
-    expandedFormRowState.value = state
+    expandedFormRowState.value = _state
     expandedFormDlg.value = true
   }
 }
@@ -181,12 +180,15 @@ provide(ReloadRowDataHookInj, reloadViewDataHook)
                     </div>
                   </a>
                 </template>
+
                 <template #prevArrow>
                   <div style="z-index: 1"></div>
                 </template>
+
                 <template #nextArrow>
                   <div style="z-index: 1"></div>
                 </template>
+
                 <LazyNuxtImg
                   v-for="(attachment, index) in attachments(record)"
                   :key="`carousel-${record.row.id}-${index}`"
@@ -196,6 +198,7 @@ provide(ReloadRowDataHookInj, reloadViewDataHook)
                   :src="attachment.url"
                 />
               </a-carousel>
+
               <MdiFileImageBox v-else class="w-full h-48 my-4 text-cool-gray-200" />
             </template>
 
@@ -207,12 +210,14 @@ provide(ReloadRowDataHookInj, reloadViewDataHook)
               <div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
                 <div class="w-full text-gray-600">
                   <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
+
                   <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
                 </div>
               </div>
 
               <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
                 <div v-if="isRowEmpty(record, col)" class="h-3 bg-gray-200 px-5 rounded-lg"></div>
+
                 <template v-else>
                   <LazySmartsheetVirtualCell
                     v-if="isVirtualCol(col)"
@@ -220,6 +225,7 @@ provide(ReloadRowDataHookInj, reloadViewDataHook)
                     :column="col"
                     :row="record"
                   />
+
                   <LazySmartsheetCell
                     v-else
                     v-model="record.row[col.title]"
@@ -248,7 +254,7 @@ provide(ReloadRowDataHookInj, reloadViewDataHook)
       :view="view"
     />
 
-    <SmartsheetExpandedForm
+    <LazySmartsheetExpandedForm
       v-if="expandedFormOnRowIdDlg"
       :key="route.query.rowId"
       v-model="expandedFormOnRowIdDlg"

packages/nc-gui/components/smartsheet/Grid.vue

@@ -135,7 +135,7 @@ reloadViewDataHook?.on(async (shouldShowLoading) => {
 const skipRowRemovalOnCancel = ref(false)
 
 const expandForm = (row: Row, state?: Record<string, any>, fromToolbar = false) => {
-  const rowId = extractPkFromRow(row.row, meta.value.columns)
+  const rowId = extractPkFromRow(row.row, meta.value!.columns!)
 
   if (rowId) {
     router.push({
@@ -653,7 +653,7 @@ reloadViewDataHook.trigger()
       @update:model-value="!skipRowRemovalOnCancel && removeRowIfNew(expandedFormRow)"
     />
 
-    <SmartsheetExpandedForm
+    <LazySmartsheetExpandedForm
       v-if="expandedFormOnRowIdDlg"
       :key="route.query.rowId"
       v-model="expandedFormOnRowIdDlg"

packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue

@@ -91,6 +91,7 @@ const filterAutoSaveLoc = computed({
           </a-checkbox>
 
           <div class="flex-1" />
+
           <a-button
             v-show="!filterAutoSave"
             v-e="['a:filter:auto-apply']"

packages/nc-gui/components/smartsheet/toolbar/Erd.vue

@@ -35,8 +35,9 @@ const selectedView = inject(ActiveViewInj)
         </template>
       </a-button>
     </div>
+
     <div class="w-full h-full !py-0 !px-2" style="height: 70vh">
-      <ErdView :table="meta" />
+      <LazyErdView :table="meta" />
     </div>
   </a-modal>
 </template>

packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue

@@ -100,6 +100,7 @@ const exportFile = async (exportType: ExportTypes) => {
       {{ $t('activity.downloadCSV') }}
     </div>
   </a-menu-item>
+
   <a-menu-item>
     <div v-e="['a:actions:download-excel']" class="nc-project-menu-item" @click="exportFile(ExportTypes.EXCEL)">
       <MdiDownloadOutline class="text-gray-500" />

packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue

@@ -14,6 +14,7 @@ import {
   useI18n,
   useNuxtApp,
   useProject,
+  useSmartsheetStoreOrThrow,
   useUIPermission,
 } from '#imports'
 
@@ -165,9 +166,9 @@ const exportFile = async (exportType: ExportTypes) => {
       </template>
     </a-dropdown>
 
-    <DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" import-type="csv" :import-only="true" />
+    <LazyDlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" import-type="csv" :import-only="true" />
 
-    <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
+    <LazyWebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
     <a-modal
       v-model:visible="sharedViewListDlg"
@@ -176,7 +177,7 @@ const exportFile = async (exportType: ExportTypes) => {
       :footer="null"
       wrap-class-name="nc-modal-shared-view-list"
     >
-      <SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
+      <LazySmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
     </a-modal>
   </div>
 </template>

packages/nc-gui/components/smartsheet/toolbar/ShareView.vue

@@ -144,9 +144,11 @@ watch(passwordProtected, (value) => {
     >
       <div class="share-link-box nc-share-link-box bg-primary-50">
         <div class="flex-1 h-min text-xs">{{ sharedViewUrl }}</div>
+
         <a v-e="['c:view:share:open-url']" :href="sharedViewUrl" target="_blank">
           <MdiOpenInNew class="text-sm text-gray-500 mt-2" />
         </a>
+
         <MdiContentCopy v-e="['c:view:share:copy-url']" class="text-gray-500 text-sm cursor-pointer" @click="copyLink" />
       </div>
 
@@ -154,6 +156,7 @@ watch(passwordProtected, (value) => {
         <a-collapse-panel key="1" :header="$t('general.showOptions')">
           <div class="mb-2">
             <a-checkbox v-model:checked="passwordProtected" class="!text-xs">{{ $t('msg.info.beforeEnablePwd') }} </a-checkbox>
+
             <div v-if="passwordProtected" class="flex gap-2 mt-2 mb-4">
               <a-input
                 v-model:value="shared.password"
@@ -162,8 +165,9 @@ watch(passwordProtected, (value) => {
                 type="password"
                 :placeholder="$t('placeholder.password.enter')"
               />
-              <a-button size="small" class="!text-xs" @click="saveShareLinkPassword"
-                >{{ $t('placeholder.password.save') }}
+
+              <a-button size="small" class="!text-xs" @click="saveShareLinkPassword">
+                {{ $t('placeholder.password.save') }}
               </a-button>
             </div>
           </div>

packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue

@@ -18,7 +18,6 @@ import { LockType } from '~/lib'
 import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
 import MdiAccountIcon from '~icons/mdi/account'
 import MdiAccountGroupIcon from '~icons/mdi/account-group'
-import AcountTreeRoundedIcon from '~icons/material-symbols/account-tree-rounded'
 
 const { t } = useI18n()
 
@@ -113,7 +112,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
             >
               <template #title>
                 <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0 !py-0">
-                  <SmartsheetToolbarLockType hide-tick :type="selectedView?.lock_type || LockType.Collaborative" />
+                  <LazySmartsheetToolbarLockType hide-tick :type="selectedView?.lock_type || LockType.Collaborative" />
 
                   <MaterialSymbolsChevronRightRounded
                     class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
@@ -123,15 +122,15 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
 
               <template #expandIcon></template>
               <a-menu-item @click="changeLockType(LockType.Collaborative)">
-                <SmartsheetToolbarLockType :type="LockType.Collaborative" />
+                <LazySmartsheetToolbarLockType :type="LockType.Collaborative" />
               </a-menu-item>
 
               <a-menu-item @click="changeLockType(LockType.Locked)">
-                <SmartsheetToolbarLockType :type="LockType.Locked" />
+                <LazySmartsheetToolbarLockType :type="LockType.Locked" />
               </a-menu-item>
 
               <a-menu-item @click="changeLockType(LockType.Personal)">
-                <SmartsheetToolbarLockType :type="LockType.Personal" />
+                <LazySmartsheetToolbarLockType :type="LockType.Personal" />
               </a-menu-item>
             </a-sub-menu>
 
@@ -217,9 +216,10 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
                 {{ $t('activity.getApiSnippet') }}
               </div>
             </a-menu-item>
+
             <a-menu-item>
               <div v-e="['c:erd:open']" class="py-2 flex gap-2 items-center nc-view-action-erd" @click="showErd = true">
-                <AcountTreeRoundedIcon class="text-gray-500" />
+                <MaterialSymbolsAccountTreeRounded class="text-gray-500" />
                 {{ $t('title.erdView') }}
               </div>
             </a-menu-item>
@@ -232,7 +232,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
 
     <LazyWebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
-    <SmartsheetToolbarErd v-model="showErd" />
+    <LazySmartsheetToolbarErd v-model="showErd" />
 
     <a-modal
       v-model:visible="sharedViewListDlg"

packages/nc-gui/components/tabs/auth/UserManagement.vue

@@ -4,6 +4,7 @@ import {
   extractSdkResponseErrorMsg,
   message,
   onBeforeMount,
+  projectRoleTagColors,
   ref,
   useApi,
   useCopy,

packages/nc-gui/components/template/Editor.vue

@@ -661,6 +661,7 @@ function handleEditableTnChange(idx: number) {
               <template #emptyText>
                 <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
               </template>
+
               <template #headerCell="{ column }">
                 <template v-if="column.key === 'column_name'">
                   <span>