refactor(nc-gui): use lazy components

packages/nc-gui/components/shared-view/Grid.vue

@@ -29,8 +29,9 @@ if (signedIn.value) {
 
 <template>
   <div class="nc-container flex flex-col h-full mt-1.5 px-12">
-    <SmartsheetToolbar />
-    <SmartsheetGrid />
+    <LazySmartsheetToolbar />
+
+    <LazySmartsheetGrid />
   </div>
 </template>
 

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

@@ -417,12 +417,13 @@ reloadViewDataHook.trigger()
 </script>
 
 <template>
-  <div class="flex flex-col h-full min-h-0 w-full">
+  <div class="relative flex flex-col h-full min-h-0 w-full">
     <general-overlay :model-value="isLoading" inline transition class="!bg-opacity-15">
-      <div class="flex items-center justify-center h-full w-full">
+      <div class="flex items-center justify-center h-full w-full !bg-white !bg-opacity-85 z-1000">
         <a-spin size="large" />
       </div>
     </general-overlay>
+
     <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
       <a-dropdown
         v-model:visible="contextMenu"
@@ -642,18 +643,14 @@ reloadViewDataHook.trigger()
 
     <SmartsheetPagination />
 
-    <SmartsheetExpandedForm
+    <LazySmartsheetExpandedForm
       v-if="expandedFormRow && expandedFormDlg"
       v-model="expandedFormDlg"
       :row="expandedFormRow"
       :state="expandedFormRowState"
       :meta="meta"
       :view="view"
-      @update:model-value="
-        () => {
-          if (!skipRowRemovalOnCancel) removeRowIfNew(expandedFormRow)
-        }
-      "
+      @update:model-value="!skipRowRemovalOnCancel && removeRowIfNew(expandedFormRow)"
     />
 
     <SmartsheetExpandedForm

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { ColumnType, TableType } from 'nocodb-sdk'
-import SmartsheetGrid from '../smartsheet/Grid.vue'
 import {
   ActiveViewInj,
   FieldsInj,
@@ -10,10 +9,12 @@ import {
   OpenNewRecordFormHookInj,
   ReloadViewDataHookInj,
   ReloadViewMetaHookInj,
+  TabMetaInj,
   computed,
   createEventHook,
   inject,
   provide,
+  ref,
   useMetas,
   useProvideSmartsheetStore,
   watch,
@@ -28,7 +29,7 @@ const { metas } = useMetas()
 
 const activeView = ref()
 
-const el = ref<typeof SmartsheetGrid>()
+const el = ref()
 
 const fields = ref<ColumnType[]>([])
 
@@ -36,8 +37,8 @@ provide(TabMetaInj, ref(activeTab))
 const meta = computed<TableType>(() => metas.value?.[activeTab?.id as string])
 
 const reloadEventHook = createEventHook()
-const reloadViewMetaEventHook = createEventHook<void>()
-const openNewRecordFormHook = createEventHook<void>()
+const reloadViewMetaEventHook = createEventHook()
+const openNewRecordFormHook = createEventHook()
 
 const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView, meta)
 
@@ -62,21 +63,24 @@ watch(isLocked, (nextValue) => (treeViewIsLockedInj.value = nextValue), { immedi
 <template>
   <div class="nc-container flex h-full">
     <div class="flex flex-col h-full flex-1 min-w-0">
-      <SmartsheetToolbar />
+      <LazySmartsheetToolbar />
 
-      <template v-if="meta">
-        <div class="flex flex-1 min-h-0">
-          <div v-if="activeView" class="h-full flex-1 min-w-0 min-h-0 bg-gray-50">
-            <SmartsheetGrid v-if="isGrid" :ref="el" />
+      <Transition name="layout" mode="out-in">
+        <template v-if="meta">
+          <div class="flex flex-1 min-h-0">
+            <div v-if="activeView" class="h-full flex-1 min-w-0 min-h-0 bg-gray-50">
+              <LazySmartsheetGrid v-if="isGrid" :ref="el" />
 
-            <SmartsheetGallery v-else-if="isGallery" />
+              <LazySmartsheetGallery v-else-if="isGallery" />
 
-            <SmartsheetForm v-else-if="isForm && !$route.query.reload" />
+              <LazySmartsheetForm v-else-if="isForm && !$route.query.reload" />
+            </div>
           </div>
-        </div>
-      </template>
+        </template>
+      </Transition>
     </div>
-    <SmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
+
+    <LazySmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
   </div>
 </template>
 

packages/nc-gui/nuxt.config.ts

@@ -62,7 +62,7 @@ export default defineNuxtConfig({
         runtimeOnly: false,
       }),
       Icons({
-        autoInstall: true,
+        autoInstall: false,
         compiler: 'vue3',
         defaultClass: 'nc-icon',
       }),
@@ -74,6 +74,22 @@ export default defineNuxtConfig({
           }),
           IconsResolver({
             prefix: false,
+            enabledCollections: [
+              'ant-design',
+              'bi',
+              'cil',
+              'clarity',
+              'eva',
+              'ic',
+              'logos',
+              'lucide',
+              'material-symbols',
+              'mdi',
+              'mi',
+              'ph',
+              'ri',
+              'system-uicons',
+            ],
           }),
         ],
       }),

packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@@ -477,7 +477,7 @@ onBeforeUnmount(reset)
     </template>
 
     <div :key="$route.fullPath.split('?')[0]">
-      <dashboard-settings-modal v-model="dialogOpen" :open-key="openDialogKey" />
+      <LazyDashboardSettingsModal v-model="dialogOpen" :open-key="openDialogKey" />
 
       <NuxtPage />
 

packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue

@@ -81,13 +81,9 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
       </div>
 
       <div class="w-full min-h-[300px] flex-auto">
-        <div v-show="!isLoadingProject" class="w-full h-full">
+        <div class="w-full h-full">
           <NuxtPage />
         </div>
-
-        <div v-show="isLoadingProject" class="w-full h-full flex justify-center items-center">
-          <a-spin size="large" />
-        </div>
       </div>
     </div>
   </div>

packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue

@@ -27,5 +27,5 @@ until(tables)
   <div v-if="loading" class="flex items-center justify-center h-full w-full">
     <a-spin size="large" />
   </div>
-  <TabsSmartsheet v-else :key="route.params.title" :active-tab="activeTab" />
+  <LazyTabsSmartsheet v-else :key="route.params.title" :active-tab="activeTab" />
 </template>

packages/nc-gui/pages/[projectType]/[projectId]/index/index/index.vue

@@ -152,6 +152,7 @@ function onDropZoneClick(e: MouseEvent) {
       <div class="text-3xl">Welcome to NocoDB!</div>
       <div class="prose-lg leading-8">To get started, click on a table in the left pane</div>
     </div>
+
     <div v-else ref="dropZone">
       <general-overlay
         :model-value="true"
@@ -172,6 +173,7 @@ function onDropZoneClick(e: MouseEvent) {
           <span class="flex items-center gap-2"><BiFiletypeJson /> JSON</span> or
           <span class="flex items-center gap-2"><BiFiletypeXlsx /> Excel file here or</span>
         </div>
+
         <a-button type="primary" ghost class="create-table-btn">
           <span class="prose text-[1rem] text-primary z-50" @click.stop="openCreateTable">{{ $t('tooltip.addTable') }}</span>
         </a-button>