From 4c29fa18ff064af4d82b1ba72837c1d05a2a144c Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 22 Sep 2022 18:19:11 +0200
Subject: [PATCH] refactor(nc-gui): use lazy load and cleanup imports

---
 .../nc-gui/components/api-client/Headers.vue  | 29 ++++---
 .../nc-gui/components/api-client/Params.vue   | 25 +++---
 packages/nc-gui/components/cell/Currency.vue  |  5 +-
 .../nc-gui/components/cell/DateTimePicker.vue |  2 +-
 packages/nc-gui/components/cell/Decimal.vue   |  4 +-
 packages/nc-gui/components/cell/Duration.vue  | 14 +++-
 packages/nc-gui/components/cell/Email.vue     |  5 +-
 packages/nc-gui/components/cell/Float.vue     |  4 +-
 packages/nc-gui/components/cell/Integer.vue   |  4 +-
 packages/nc-gui/components/cell/Json.vue      |  3 +-
 .../nc-gui/components/cell/MultiSelect.vue    |  1 +
 packages/nc-gui/components/cell/Percent.vue   | 61 +-------------
 .../nc-gui/components/cell/PhoneNumber.vue    |  6 +-
 packages/nc-gui/components/cell/Rating.vue    |  3 +-
 packages/nc-gui/components/cell/Text.vue      |  1 +
 packages/nc-gui/components/cell/TextArea.vue  |  4 +-
 .../nc-gui/components/cell/TimePicker.vue     |  4 +-
 packages/nc-gui/components/cell/Url.vue       |  7 +-
 .../components/cell/attachment/index.vue      |  6 +-
 .../components/cell/attachment/utils.ts       |  5 +-
 .../nc-gui/components/dashboard/TreeView.vue  | 28 +++----
 .../dashboard/settings/AppStore.vue           | 30 ++++---
 .../dashboard/settings/AuditTab.vue           |  9 +-
 .../dashboard/settings/Metadata.vue           | 25 ++++--
 .../components/dashboard/settings/Misc.vue    |  8 +-
 .../components/dashboard/settings/Modal.vue   | 31 +++----
 .../components/dashboard/settings/UIAcl.vue   | 26 ++++--
 .../settings/app-store/AppInstall.vue         | 35 ++++----
 .../nc-gui/components/dlg/AirtableImport.vue  | 15 ++--
 .../nc-gui/components/dlg/QuickImport.vue     |  7 +-
 .../nc-gui/components/dlg/TableCreate.vue     | 11 +--
 .../nc-gui/components/dlg/TableRename.vue     | 38 +++++++--
 packages/nc-gui/components/dlg/ViewCreate.vue | 22 +++--
 packages/nc-gui/components/dlg/ViewDelete.vue | 21 ++---
 .../components/general/ChromeWrapper.vue      |  2 -
 .../components/general/ColorModeSwitcher.vue  |  2 -
 .../nc-gui/components/general/ColorPicker.vue |  4 +-
 .../components/general/FlippingCard.vue       |  5 ++
 .../nc-gui/components/general/FullScreen.vue  |  3 +-
 .../components/general/HelpAndSupport.vue     | 10 ++-
 .../nc-gui/components/general/MiniSidebar.vue |  3 +-
 .../nc-gui/components/general/ReleaseInfo.vue | 23 ++++-
 packages/nc-gui/components/general/Share.vue  |  2 +
 .../components/general/ShareBaseButton.vue    |  3 +-
 packages/nc-gui/components/general/Social.vue | 10 +--
 .../nc-gui/components/general/SocialCard.vue  |  9 +-
 .../nc-gui/components/general/Tooltip.vue     |  4 +-
 .../components/general/TruncateText.vue       | 32 +++----
 .../nc-gui/components/smartsheet/Form.vue     |  2 +-
 .../nc-gui/components/smartsheet/Gallery.vue  |  2 +-
 .../nc-gui/components/smartsheet/Grid.vue     |  2 +-
 packages/nc-gui/components/smartsheet/Row.vue |  2 +-
 .../components/smartsheet/VirtualCell.vue     |  2 +-
 .../smartsheet/column/SelectOptions.vue       |  6 +-
 .../smartsheet/expanded-form/index.vue        |  2 +-
 .../components/smartsheet/header/Menu.vue     |  2 +-
 .../components/smartsheet/sidebar/MenuTop.vue |  3 +-
 .../toolbar/FieldListAutoCompleteDropdown.vue | 15 ++--
 .../smartsheet/toolbar/FieldsMenu.vue         |  9 +-
 .../smartsheet/toolbar/SharedViewList.vue     |  2 +-
 packages/nc-gui/components/tabs/Auth.vue      |  6 +-
 .../nc-gui/components/tabs/Smartsheet.vue     |  4 +-
 .../tabs/auth/ApiTokenManagement.vue          | 41 +++++----
 .../components/tabs/auth/UserManagement.vue   | 19 +++--
 .../auth/user-management/FeedbackForm.vue     |  3 +
 .../tabs/auth/user-management/ShareBase.vue   | 15 +++-
 .../tabs/auth/user-management/UsersModal.vue  | 24 ++++--
 .../nc-gui/components/template/Editor.vue     |  8 +-
 .../components/virtual-cell/BelongsTo.vue     | 21 +++--
 .../nc-gui/components/virtual-cell/Count.vue  |  2 -
 .../components/virtual-cell/Formula.vue       |  5 +-
 .../components/virtual-cell/HasMany.vue       | 27 +++---
 .../nc-gui/components/virtual-cell/Lookup.vue |  6 +-
 .../components/virtual-cell/ManyToMany.vue    | 24 ++++--
 .../virtual-cell/components/ItemChip.vue      | 15 +---
 .../components/ListChildItems.vue             | 21 +++--
 .../virtual-cell/components/ListItems.vue     | 15 ++--
 .../components/webhook/ChannelMultiSelect.vue |  2 +-
 packages/nc-gui/components/webhook/Drawer.vue |  5 +-
 packages/nc-gui/components/webhook/Editor.vue | 37 ++++++---
 packages/nc-gui/components/webhook/List.vue   | 11 ++-
 packages/nc-gui/components/webhook/Test.vue   |  5 +-
 packages/nc-gui/composables/index.ts          | 28 -------
 packages/nc-gui/composables/useApi/index.ts   |  3 +-
 packages/nc-gui/composables/useColors.ts      |  4 +-
 packages/nc-gui/composables/useColumn.ts      | 17 ++--
 .../composables/useColumnCreateStore.ts       | 22 ++++-
 packages/nc-gui/composables/useCopy.ts        |  2 +-
 packages/nc-gui/composables/useDashboard.ts   |  3 +
 .../nc-gui/composables/useDialog/index.ts     |  2 +-
 .../composables/useExpandedFormStore.ts       | 52 +++++++-----
 .../nc-gui/composables/useGlobal/actions.ts   | 14 ++--
 .../nc-gui/composables/useGlobal/state.ts     |  6 +-
 .../composables/useGridViewColumnWidth.ts     | 12 +--
 packages/nc-gui/composables/useLTARStore.ts   | 43 +++++-----
 packages/nc-gui/composables/useMetas.ts       | 11 ++-
 packages/nc-gui/composables/useProject.ts     |  4 +-
 .../composables/useSharedFormViewStore.ts     |  2 +-
 packages/nc-gui/composables/useSharedView.ts  | 13 ++-
 .../nc-gui/composables/useSidebar/index.ts    | 31 +++----
 .../composables/useSmartsheetRowStore.ts      |  6 +-
 .../nc-gui/composables/useSmartsheetStore.ts  |  9 +-
 packages/nc-gui/composables/useTable.ts       | 32 ++++---
 packages/nc-gui/composables/useTabs.ts        | 22 ++---
 packages/nc-gui/composables/useTheme/index.ts |  7 +-
 .../composables/useUIPermission/index.ts      |  6 +-
 .../useUIPermission/rolePermissions.ts        | 83 -------------------
 packages/nc-gui/composables/useViewColumns.ts |  4 +-
 packages/nc-gui/composables/useViewData.ts    | 31 ++++---
 packages/nc-gui/composables/useViewFilters.ts |  3 +-
 packages/nc-gui/composables/useViewSorts.ts   | 26 ++++--
 packages/nc-gui/composables/useVirtualCell.ts | 22 ++---
 packages/nc-gui/context/index.ts              |  3 +-
 packages/nc-gui/layouts/base.vue              |  6 +-
 packages/nc-gui/layouts/shared-view.vue       |  3 +
 packages/nc-gui/lib/constants.ts              | 56 ++++++++++++-
 packages/nc-gui/lib/enums.ts                  |  6 ++
 packages/nc-gui/lib/types.ts                  | 36 +++++++-
 packages/nc-gui/nuxt.config.ts                |  4 +
 .../pages/[projectType]/[projectId]/index.vue | 30 ++++---
 .../[projectType]/[projectId]/index/index.vue | 22 +++--
 .../index/[type]/[title]/[[viewTitle]].vue    |  4 +-
 .../[projectId]/index/index/auth.vue          |  6 +-
 .../[projectId]/index/index/index.vue         | 13 +--
 .../pages/[projectType]/base/[baseId].vue     |  1 +
 .../[projectType]/form/[viewId]/index.vue     | 13 +--
 packages/nc-gui/pages/forgot-password.vue     |  4 +-
 .../nc-gui/pages/index/index/[projectId].vue  |  1 +
 .../pages/index/index/create-external.vue     |  5 +-
 packages/nc-gui/pages/index/index/create.vue  |  2 +-
 packages/nc-gui/pages/index/index/index.vue   |  3 +-
 packages/nc-gui/pages/signin.vue              |  2 +-
 packages/nc-gui/pages/signup/[[token]].vue    |  2 +-
 packages/nc-gui/plugins/a.i18n.ts             |  3 +-
 packages/nc-gui/plugins/feedbackForm.ts       |  4 +-
 packages/nc-gui/plugins/resizeDirective.ts    |  3 +-
 packages/nc-gui/plugins/tele.ts               |  5 +-
 packages/nc-gui/utils/iconUtils.ts            | 29 +++++++
 138 files changed, 985 insertions(+), 777 deletions(-)
 delete mode 100644 packages/nc-gui/composables/index.ts

diff --git a/packages/nc-gui/components/api-client/Headers.vue b/packages/nc-gui/components/api-client/Headers.vue
index 419a82c7ff..9cdeb71934 100644
--- a/packages/nc-gui/components/api-client/Headers.vue
+++ b/packages/nc-gui/components/api-client/Headers.vue
@@ -1,18 +1,15 @@
 <script setup lang="ts">
-import MdiPlusIcon from '~icons/mdi/plus'
-import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
+import { useVModel } from '#imports'
 
-interface Props {
-  modelValue: Record<string, any>[]
-}
-
-const props = defineProps<Props>()
+const props = defineProps<{
+  modelValue: any[]
+}>()
 
 const emits = defineEmits(['update:modelValue'])
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const headerList = ref([
+const headerList = [
   'A-IM',
   'Accept',
   'Accept-Charset',
@@ -52,11 +49,11 @@ const headerList = ref([
   'Dnt',
   'X-Requested-With',
   'X-CSRF-Token',
-])
+]
 
 const addHeaderRow = () => vModel.value.push({})
 
-const deleteHeaderRow = (idx: number) => vModel.value.splice(idx, 1)
+const deleteHeaderRow = (i: number) => vModel.value.splice(i, 1)
 </script>
 
 <template>
@@ -67,17 +64,21 @@ const deleteHeaderRow = (idx: number) => vModel.value.splice(idx, 1)
           <th>
             <!-- Intended to be empty - For checkbox -->
           </th>
+
           <th>
             <div class="text-center font-normal mb-2">Header Name</div>
           </th>
+
           <th>
             <div class="text-center font-normal mb-2">Value</div>
           </th>
+
           <th>
             <!-- Intended to be empty - For delete button -->
           </th>
         </tr>
       </thead>
+
       <tbody>
         <tr v-for="(headerRow, idx) in vModel" :key="idx">
           <td class="px-2 nc-hook-header-tab-checkbox">
@@ -85,6 +86,7 @@ const deleteHeaderRow = (idx: number) => vModel.value.splice(idx, 1)
               <a-checkbox v-model:checked="headerRow.enabled" />
             </a-form-item>
           </td>
+
           <td class="px-2 w-min-[400px]">
             <a-form-item>
               <a-select
@@ -101,22 +103,25 @@ const deleteHeaderRow = (idx: number) => vModel.value.splice(idx, 1)
               </a-select>
             </a-form-item>
           </td>
+
           <td class="px-2 w-min-[400px]">
             <a-form-item>
               <a-input v-model:value="headerRow.value" size="large" placeholder="Value" class="nc-input-hook-header-value" />
             </a-form-item>
           </td>
+
           <td class="relative">
             <div v-if="idx !== 0" class="absolute flex flex-col justify-start mt-2 -right-6 top-0">
-              <MdiDeleteOutlineIcon class="cursor-pointer" @click="deleteHeaderRow(idx)" />
+              <MdiDeleteOutline class="cursor-pointer" @click="deleteHeaderRow(idx)" />
             </div>
           </td>
         </tr>
+
         <tr>
           <td :colspan="12" class="text-center">
             <a-button type="default" class="!bg-gray-100 rounded-md border-none mr-1" @click="addHeaderRow">
               <template #icon>
-                <MdiPlusIcon class="flex mx-auto" />
+                <MdiPlus class="flex mx-auto" />
               </template>
             </a-button>
           </td>
diff --git a/packages/nc-gui/components/api-client/Params.vue b/packages/nc-gui/components/api-client/Params.vue
index bacdab9b54..b05c214509 100644
--- a/packages/nc-gui/components/api-client/Params.vue
+++ b/packages/nc-gui/components/api-client/Params.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import MdiPlusIcon from '~icons/mdi/plus'
-import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
+import { useVModel } from '#imports'
 
-interface Props {
-  modelValue: Record<string, any>[]
-}
-
-const props = defineProps<Props>()
+const props = defineProps<{
+  modelValue: any[]
+}>()
 
 const emits = defineEmits(['update:modelValue'])
 
@@ -14,7 +11,7 @@ const vModel = useVModel(props, 'modelValue', emits)
 
 const addParamRow = () => vModel.value.push({})
 
-const deleteParamRow = (idx: number) => vModel.value.splice(idx, 1)
+const deleteParamRow = (i: number) => vModel.value.splice(i, 1)
 </script>
 
 <template>
@@ -25,17 +22,21 @@ const deleteParamRow = (idx: number) => vModel.value.splice(idx, 1)
           <th>
             <!-- Intended to be empty - For checkbox -->
           </th>
+
           <th>
             <div class="text-center font-normal mb-2">Param Name</div>
           </th>
+
           <th>
             <div class="text-center font-normal mb-2">Value</div>
           </th>
+
           <th>
             <!-- Intended to be empty - For delete button -->
           </th>
         </tr>
       </thead>
+
       <tbody>
         <tr v-for="(paramRow, idx) in vModel" :key="idx">
           <td class="px-2">
@@ -43,27 +44,31 @@ const deleteParamRow = (idx: number) => vModel.value.splice(idx, 1)
               <a-checkbox v-model:checked="paramRow.enabled" />
             </a-form-item>
           </td>
+
           <td class="px-2">
             <a-form-item>
               <a-input v-model:value="paramRow.name" size="large" placeholder="Key" />
             </a-form-item>
           </td>
+
           <td class="px-2">
             <a-form-item>
               <a-input v-model:value="paramRow.value" size="large" placeholder="Value" />
             </a-form-item>
           </td>
+
           <td class="relative">
             <div v-if="idx !== 0" class="absolute flex flex-col justify-start mt-2 -right-6 top-0">
-              <MdiDeleteOutlineIcon class="cursor-pointer" @click="deleteParamRow(idx)" />
+              <MdiDeleteOutline class="cursor-pointer" @click="deleteParamRow(idx)" />
             </div>
           </td>
         </tr>
+
         <tr>
           <td :colspan="12" class="text-center">
             <a-button type="default" class="!bg-gray-100 rounded-md border-none mr-1" @click="addParamRow">
               <template #icon>
-                <MdiPlusIcon class="flex mx-auto" />
+                <MdiPlus class="flex mx-auto" />
               </template>
             </a-button>
           </td>
diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue
index 076e780194..c81740e7a2 100644
--- a/packages/nc-gui/components/cell/Currency.vue
+++ b/packages/nc-gui/components/cell/Currency.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { ColumnInj, computed, inject, useVModel } from '#imports'
-import { EditModeInj } from '~/context'
+import { ColumnInj, EditModeInj, computed, inject, useVModel } from '#imports'
 
 interface Props {
   modelValue: number | null | undefined
@@ -49,6 +48,8 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     class="w-full h-full border-none outline-none"
     @blur="editEnabled = false"
   />
+
   <span v-else-if="vModel">{{ currency }}</span>
+
   <span v-else />
 </template>
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 6f932de809..33d99c5c8f 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ReadonlyInj } from '#imports'
+import { ReadonlyInj, inject, ref, useProject, watch } from '#imports'
 
 interface Props {
   modelValue: string | null | undefined
diff --git a/packages/nc-gui/components/cell/Decimal.vue b/packages/nc-gui/components/cell/Decimal.vue
index 42c37612ee..a69b570860 100644
--- a/packages/nc-gui/components/cell/Decimal.vue
+++ b/packages/nc-gui/components/cell/Decimal.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { inject, useVModel } from '#imports'
-import { EditModeInj } from '~/context'
+import { EditModeInj, inject, useVModel } from '#imports'
 
 interface Props {
   modelValue: number | null | string | undefined
@@ -32,6 +31,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     step="0.1"
     @blur="editEnabled = false"
   />
+
   <span v-else class="prose-sm">{{ vModel }}</span>
 </template>
 
diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue
index 5a33005672..4d5846cc9d 100644
--- a/packages/nc-gui/components/cell/Duration.vue
+++ b/packages/nc-gui/components/cell/Duration.vue
@@ -1,6 +1,14 @@
 <script setup lang="ts">
-import { ColumnInj, computed, convertDurationToSeconds, convertMS2Duration, durationOptions, inject, ref } from '#imports'
-import { EditModeInj } from '~/context'
+import {
+  ColumnInj,
+  EditModeInj,
+  computed,
+  convertDurationToSeconds,
+  convertMS2Duration,
+  durationOptions,
+  inject,
+  ref,
+} from '#imports'
 
 interface Props {
   modelValue: number | string | null | undefined
@@ -72,7 +80,9 @@ const submitDuration = () => {
       @keypress="checkDurationFormat($event)"
       @keydown.enter="submitDuration"
     />
+
     <span v-else> {{ localState }}</span>
+
     <div v-if="showWarningMessage" class="duration-warning">
       <!-- TODO: i18n -->
       Please enter a number
diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index 8db19bba27..cd4a2ad50a 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { computed, inject, isEmail, useVModel } from '#imports'
-import { EditModeInj } from '~/context'
+import { EditModeInj, computed, inject, isEmail, useVModel } from '#imports'
 
 interface Props {
   modelValue: string | null | undefined
@@ -26,8 +25,10 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
 <template>
   <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm" @blur="editEnabled = false" />
+
   <a v-else-if="validEmail" class="text-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
     {{ vModel }}
   </a>
+
   <span v-else>{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui/components/cell/Float.vue b/packages/nc-gui/components/cell/Float.vue
index 69e35c19fe..27c966e046 100644
--- a/packages/nc-gui/components/cell/Float.vue
+++ b/packages/nc-gui/components/cell/Float.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { inject, useVModel } from '#imports'
-import { EditModeInj } from '~/context'
+import { EditModeInj, inject, useVModel } from '#imports'
 
 interface Props {
   modelValue: number | null | undefined
@@ -32,6 +31,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     step="0.1"
     @blur="editEnabled = false"
   />
+
   <span v-else class="prose-sm">{{ vModel }}</span>
 </template>
 
diff --git a/packages/nc-gui/components/cell/Integer.vue b/packages/nc-gui/components/cell/Integer.vue
index 25d67997b9..8a1a19fc88 100644
--- a/packages/nc-gui/components/cell/Integer.vue
+++ b/packages/nc-gui/components/cell/Integer.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { inject, useVModel } from '#imports'
-import { EditModeInj } from '~/context'
+import { EditModeInj, inject, useVModel } from '#imports'
 
 interface Props {
   modelValue: number | null | undefined
@@ -36,6 +35,7 @@ function onKeyDown(evt: KeyboardEvent) {
     @blur="editEnabled = false"
     @keydown="onKeyDown"
   />
+
   <span v-else class="prose-sm">{{ vModel }}</span>
 </template>
 
diff --git a/packages/nc-gui/components/cell/Json.vue b/packages/nc-gui/components/cell/Json.vue
index f1d9bad0f3..e21ce6d9df 100644
--- a/packages/nc-gui/components/cell/Json.vue
+++ b/packages/nc-gui/components/cell/Json.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { Modal as AModal } from 'ant-design-vue'
-import { EditModeInj, IsFormInj, ReadonlyInj, computed, inject, ref, useVModel, watch } from '#imports'
+import { Modal as AModal, EditModeInj, IsFormInj, ReadonlyInj, computed, inject, ref, useVModel, watch } from '#imports'
 
 interface Props {
   modelValue: string | Record<string, any> | undefined
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 77bfd5a3e2..43d61dd989 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -143,6 +143,7 @@ watch(isOpen, (n, _o) => {
         <span class="text-slate-500">{{ op.title }}</span>
       </a-tag>
     </a-select-option>
+
     <template #tagRender="{ value: val, onClose }">
       <a-tag
         v-if="options.find((el) => el.title === val)"
diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index e2a240ac9b..e02ea8dc85 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { EditModeInj, inject } from '#imports'
+import { EditModeInj, inject, useVModel } from '#imports'
 
 interface Props {
   modelValue: number | string | null | undefined
 }
 
 const props = defineProps<Props>()
+
 const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject(EditModeInj)
@@ -15,62 +16,6 @@ const vModel = useVModel(props, 'modelValue', emits)
 
 <template>
   <input v-if="editEnabled" v-model="vModel" type="number" />
+
   <span v-else>{{ vModel }}</span>
 </template>
-
-<!-- <script setup lang="ts">
- import { ColumnInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
- import { EditModeInj } from '~/context'
- interface Props {
-   modelValue: number | string | null | undefined
- }
- const { modelValue } = defineProps<Props>()
- const emit = defineEmits(['update:modelValue'])
- const editEnabled = inject(EditModeInj)
- const column = inject(ColumnInj)
- const percent = ref()
- const isEdited = ref(false)
- const percentType = computed(() => column?.value?.meta?.precision || 0)
- const percentStep = computed(() => getPercentStep(percentType.value))
- const localState = computed({
-   get: () => {
-     return renderPercent(modelValue, percentType.value, !isEdited.value)
-   },
-   set: (val) => {
-     if (val === null) val = 0
-     if (isValidPercent(val, column?.value?.meta?.negative)) {
-       percent.value = val / 100
-     }
-   },
- })
- function onKeyDown(evt: KeyboardEvent) {
-   isEdited.value = true
-   return ['e', 'E', '+', '-'].includes(evt.key) && evt.preventDefault()
- }
- function onBlur() {
-   if (isEdited.value) {
-     emit('update:modelValue', percent.value)
-     isEdited.value = false
-   }
- }
- function onKeyDownEnter() {
-   if (isEdited.value) {
-     emit('update:modelValue', percent.value)
-     isEdited.value = false
-   }
- }
- </script>
-
- <template>
-   <input
-     v-if="isEdited"
-     v-model="localState"
-     type="number"
-     :step="percentStep"
-     @keydown="onKeyDown"
-     @blur="onBlur"
-     @keydown.enter="onKeyDownEnter"
-   />
-   <input v-if="editEnabled" v-model="localState" type="text" @focus="isEdited = true" />
-   <span v-else>{{ localState }}</span>
- </template> -->
diff --git a/packages/nc-gui/components/cell/PhoneNumber.vue b/packages/nc-gui/components/cell/PhoneNumber.vue
index d40fb3ae12..0397b5ff55 100644
--- a/packages/nc-gui/components/cell/PhoneNumber.vue
+++ b/packages/nc-gui/components/cell/PhoneNumber.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Text from './Text.vue'
+import { useVModel } from '#imports'
 
 interface Props {
   modelValue: any
@@ -17,7 +17,5 @@ const vModel = useVModel(props, 'modelValue', emits)
 </script>
 
 <template>
-  <Text v-model="vModel" />
+  <LazyCellText v-model="vModel" />
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui/components/cell/Rating.vue b/packages/nc-gui/components/cell/Rating.vue
index 4918deb841..81d5d6f5d9 100644
--- a/packages/nc-gui/components/cell/Rating.vue
+++ b/packages/nc-gui/components/cell/Rating.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ColumnInj, computed, inject } from '#imports'
-import { EditModeInj } from '~/context'
+import { ColumnInj, EditModeInj, computed, inject } from '#imports'
 
 interface Props {
   modelValue?: number | null | undefined
diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index 23575fc222..2939042a11 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -25,5 +25,6 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     class="h-full w-full outline-none bg-transparent"
     @blur="editEnabled = false"
   />
+
   <span v-else>{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 71227b2a72..a32b9e6214 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { computed, inject } from '#imports'
-import { EditModeInj } from '~/context'
+import { EditModeInj, computed, inject } from '#imports'
 
 interface Props {
   modelValue: string | null | undefined
@@ -32,5 +31,6 @@ const focus: VNodeRef = (el) => (el as HTMLTextAreaElement)?.focus()
     @keydown.alt.enter.stop
     @keydown.shift.enter.stop
   />
+
   <span v-else>{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 0fd82f3f68..e2fef85742 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core'
 import dayjs from 'dayjs'
+import { ReadonlyInj, inject, onClickOutside, useProject, watch } from '#imports'
 
 interface Props {
   modelValue?: string | null | undefined
@@ -16,7 +16,7 @@ const readOnly = inject(ReadonlyInj, false)
 
 let isTimeInvalid = $ref(false)
 
-const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
+const dateFormat = isMysql.value ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
 
 const localState = $computed({
   get() {
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index 5c00e36526..f3fa740b17 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { message } from 'ant-design-vue'
 import {
   CellUrlDisableOverlayInj,
   ColumnInj,
@@ -8,6 +7,7 @@ import {
   computed,
   inject,
   isValidURL,
+  message,
   ref,
   useCellUrlConfig,
   useI18n,
@@ -77,14 +77,19 @@ watch(
 
     <nuxt-link
       v-else-if="isValid && !cellUrlOptions?.overlay"
+      no-prefetch
+      no-rel
       class="z-3 text-sm underline hover:opacity-75"
       :to="url"
       :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
     >
       {{ value }}
     </nuxt-link>
+
     <nuxt-link
       v-else-if="isValid && !disableOverlay && cellUrlOptions?.overlay"
+      no-prefetch
+      no-rel
       class="z-3 w-full h-full text-center !no-underline hover:opacity-75"
       :to="url"
       :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 46805fd6c3..6cce014d47 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -2,8 +2,6 @@
 import { onKeyDown } from '@vueuse/core'
 import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
-import Modal from './Modal.vue'
-import Carousel from './Carousel.vue'
 import {
   IsFormInj,
   IsGalleryInj,
@@ -130,7 +128,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
     ref="attachmentCellRef"
     class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1"
   >
-    <Carousel />
+    <LazyCellAttachmentCarousel />
 
     <template v-if="isSharedForm || (!isReadonly && !dragging && !!currentCellRef)">
       <general-overlay
@@ -211,7 +209,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
       </div>
     </template>
 
-    <Modal />
+    <LazyCellAttachmentModal />
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/cell/attachment/utils.ts b/packages/nc-gui/components/cell/attachment/utils.ts
index 975b84d624..bbd4a9717a 100644
--- a/packages/nc-gui/components/cell/attachment/utils.ts
+++ b/packages/nc-gui/components/cell/attachment/utils.ts
@@ -1,5 +1,3 @@
-import { message } from 'ant-design-vue'
-import FileSaver from 'file-saver'
 import {
   ColumnInj,
   EditModeInj,
@@ -11,6 +9,7 @@ import {
   computed,
   inject,
   isImage,
+  message,
   ref,
   useApi,
   useFileDialog,
@@ -146,7 +145,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
     /** download a file */
     async function downloadFile(item: Record<string, any>) {
-      FileSaver.saveAs(item.url || item.data, item.title)
+      ;(await import('file-saver')).saveAs(item.url || item.data, item.title)
     }
 
     const FileIcon = (icon: string) => {
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 8605ad2562..4f8ca1008b 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { TableType } from 'nocodb-sdk'
 import Sortable from 'sortablejs'
-import { Empty } from 'ant-design-vue'
 import GithubButton from 'vue-github-button'
 import {
+  Empty,
   computed,
   inject,
   reactive,
@@ -16,15 +16,9 @@ import {
   useUIPermission,
   watchEffect,
 } from '#imports'
-import DlgAirtableImport from '~/components/dlg/AirtableImport.vue'
-import DlgQuickImport from '~/components/dlg/QuickImport.vue'
-import DlgTableCreate from '~/components/dlg/TableCreate.vue'
-import DlgTableRename from '~/components/dlg/TableRename.vue'
-import { TabType } from '~/composables'
+import { TabType } from '~/lib'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
-import MdiMenuIcon from '~icons/mdi/dots-vertical'
-import MdiDrag from '~icons/mdi/drag-vertical'
 
 const { addTab } = useTabs()
 
@@ -49,7 +43,7 @@ const filterQuery = $ref('')
 const activeTable = computed(() => ([TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.title : null))
 
 const tablesById = $computed(() =>
-  tables.value?.reduce((acc: Record<string, TableType>, table) => {
+  tables.value?.reduce<Record<string, TableType>>((acc, table) => {
     acc[table.id!] = table
 
     return acc
@@ -150,7 +144,7 @@ function openRenameTableDialog(table: TableType, rightClick = false) {
 
   const isOpen = ref(true)
 
-  const { close } = useDialog(DlgTableRename, {
+  const { close } = useDialog(() => import('~/components/dlg/TableRename.vue'), {
     'modelValue': isOpen,
     'tableMeta': table,
     'onUpdate:modelValue': closeDialog,
@@ -168,7 +162,7 @@ function openQuickImportDialog(type: string) {
 
   const isOpen = ref(true)
 
-  const { close } = useDialog(DlgQuickImport, {
+  const { close } = useDialog(() => import('~/components/dlg/QuickImport.vue'), {
     'modelValue': isOpen,
     'importType': type,
     'onUpdate:modelValue': closeDialog,
@@ -186,7 +180,7 @@ function openAirtableImportDialog() {
 
   const isOpen = ref(true)
 
-  const { close } = useDialog(DlgAirtableImport, {
+  const { close } = useDialog(() => import('~/components/dlg/AirtableImport.vue'), {
     'modelValue': isOpen,
     'onUpdate:modelValue': closeDialog,
   })
@@ -203,7 +197,7 @@ function openTableCreateDialog() {
 
   const isOpen = ref(true)
 
-  const { close } = useDialog(DlgTableCreate, {
+  const { close } = useDialog(() => import('~/components/dlg/TableCreate.vue'), {
     'modelValue': isOpen,
     'onUpdate:modelValue': closeDialog,
   })
@@ -320,7 +314,7 @@ function openTableCreateDialog() {
                   <template #title>{{ table.table_name }}</template>
                   <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                     <div class="flex w-auto">
-                      <MdiDrag
+                      <MdiDragVertical
                         v-if="isUIAllowed('treeview-drag-n-drop')"
                         :class="`nc-child-draggable-icon-${table.title}`"
                         class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
@@ -343,7 +337,7 @@ function openTableCreateDialog() {
                       :trigger="['click']"
                       @click.stop
                     >
-                      <MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
+                      <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100" />
 
                       <template #overlay>
                         <a-menu class="!py-0 rounded text-sm">
@@ -403,11 +397,11 @@ function openTableCreateDialog() {
     <a-divider class="!my-0" />
 
     <div class="flex items-start flex-col justify-start px-2 py-3 gap-2">
-      <GeneralShareBaseButton
+      <LazyGeneralShareBaseButton
         class="color-transition py-1.5 px-2 text-primary font-bold cursor-pointer select-none hover:text-accent"
       />
 
-      <GeneralHelpAndSupport class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
+      <LazyGeneralHelpAndSupport class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
 
       <GithubButton
         class="ml-2 py-1"
diff --git a/packages/nc-gui/components/dashboard/settings/AppStore.vue b/packages/nc-gui/components/dashboard/settings/AppStore.vue
index ec6278c5bc..56fb84b2ce 100644
--- a/packages/nc-gui/components/dashboard/settings/AppStore.vue
+++ b/packages/nc-gui/components/dashboard/settings/AppStore.vue
@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import AppInstall from './app-store/AppInstall.vue'
-import MdiEditIcon from '~icons/ic/round-edit'
-import MdiCloseCircleIcon from '~icons/mdi/close-circle-outline'
-import MdiPlusIcon from '~icons/mdi/plus'
-import { extractSdkResponseErrorMsg } from '~/utils'
+import { extractSdkResponseErrorMsg, message, onMounted, useI18n, useNuxtApp } from '#imports'
 
 const { t } = useI18n()
+
 const { $api, $e } = useNuxtApp()
 
-let apps = $ref<null | Array<any>>(null)
+let apps = $ref<null | any[]>(null)
+
 let showPluginUninstallModal = $ref(false)
+
 let showPluginInstallModal = $ref(false)
+
 let pluginApp = $ref<any>(null)
 
 const fetchPluginApps = async () => {
@@ -66,7 +64,7 @@ const showResetPluginModal = async (app: any) => {
 
 onMounted(async () => {
   if (apps === null) {
-    fetchPluginApps()
+    await fetchPluginApps()
   }
 })
 </script>
@@ -80,7 +78,7 @@ onMounted(async () => {
     :footer="null"
     wrap-class-name="nc-modal-plugin-install"
   >
-    <AppInstall
+    <LazyDashboardSettingsAppInstall
       v-if="pluginApp && showPluginInstallModal"
       :id="pluginApp.id"
       @close="showPluginInstallModal = false"
@@ -117,19 +115,21 @@ onMounted(async () => {
       <div class="install-btn flex flex-row justify-end space-x-1">
         <a-button v-if="app.parsedInput" size="small" type="primary" @click="showInstallPluginModal(app)">
           <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-edit">
-            <MdiEditIcon class="pr-0.5" :height="12" />
+            <IcRoundEdit class="pr-0.5" :height="12" />
             Edit
           </div>
         </a-button>
+
         <a-button v-if="app.parsedInput" size="small" outlined @click="showResetPluginModal(app)">
           <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-reset">
-            <MdiCloseCircleIcon />
+            <MdiCloseCircleOutline />
             <div class="flex ml-0.5">Reset</div>
           </div>
         </a-button>
+
         <a-button v-else size="small" type="primary" @click="showInstallPluginModal(app)">
           <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-install">
-            <MdiPlusIcon />
+            <MdiPlus />
             Install
           </div>
         </a-button>
@@ -140,15 +140,19 @@ onMounted(async () => {
           <img
             v-if="app.title !== 'SMTP'"
             class="avatar"
+            alt="logo"
             :style="{
               backgroundColor: app.title === 'SES' ? '#242f3e' : '',
             }"
             :src="app.logo"
           />
+
           <div v-else />
         </div>
+
         <div class="flex flex-col flex-1 w-3/5 pl-3">
           <a-typography-title :level="5">{{ app.title }}</a-typography-title>
+
           {{ app.description }}
         </div>
       </div>
diff --git a/packages/nc-gui/components/dashboard/settings/AuditTab.vue b/packages/nc-gui/components/dashboard/settings/AuditTab.vue
index a8f20701d4..ad9a65fb6a 100644
--- a/packages/nc-gui/components/dashboard/settings/AuditTab.vue
+++ b/packages/nc-gui/components/dashboard/settings/AuditTab.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import { Tooltip as ATooltip, Empty } from 'ant-design-vue'
 import type { AuditType } from 'nocodb-sdk'
-import { timeAgo } from '~/utils/dateTimeUtils'
-import { h, useNuxtApp, useProject } from '#imports'
-import MdiReload from '~icons/mdi/reload'
+import { h, onMounted, timeAgo, useI18n, useNuxtApp, useProject } from '#imports'
 
 const { $api } = useNuxtApp()
+
 const { project } = useProject()
+
 const { t } = useI18n()
 
 let isLoading = $ref(false)
@@ -92,9 +91,11 @@ const columns = [
         <!--        Reload -->
         <div class="flex items-center gap-2 text-gray-600 font-light">
           <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
+
           {{ $t('general.reload') }}
         </div>
       </a-button>
+
       <a-pagination
         v-model:current="currentPage"
         :page-size="currentLimit"
diff --git a/packages/nc-gui/components/dashboard/settings/Metadata.vue b/packages/nc-gui/components/dashboard/settings/Metadata.vue
index 82b5a47e48..e515eb9fb2 100644
--- a/packages/nc-gui/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui/components/dashboard/settings/Metadata.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import { Empty, message } from 'ant-design-vue'
-import { h, useNuxtApp, useProject } from '#imports'
-import MdiReload from '~icons/mdi/reload'
-import MdiDatabaseSync from '~icons/mdi/database-sync'
-import { extractSdkResponseErrorMsg } from '~/utils'
+import { Empty, extractSdkResponseErrorMsg, h, message, useI18n, useNuxtApp, useProject } from '#imports'
 
 const { $api } = useNuxtApp()
+
 const { project, loadTables } = useProject()
+
 const { t } = useI18n()
 
 let isLoading = $ref(false)
+
 let isDifferent = $ref(false)
+
 let metadiff = $ref<any[]>([])
 
 async function loadMetaDiff() {
@@ -58,6 +57,7 @@ onMounted(async () => {
 })
 
 const tableHeaderRenderer = (label: string) => () => h('div', { class: 'text-gray-500' }, label)
+
 const columns = [
   {
     // Models
@@ -90,6 +90,7 @@ const columns = [
           </div>
         </a-button>
       </div>
+
       <div class="max-h-600px overflow-y-auto">
         <a-table
           class="w-full"
@@ -105,10 +106,13 @@ const columns = [
           :loading="isLoading"
           bordered
         >
-          <template #emptyText> <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" /> </template
-        ></a-table>
+          <template #emptyText>
+            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
+          </template>
+        </a-table>
       </div>
     </div>
+
     <div class="flex place-content-center w-2/5">
       <!--      Sync Now -->
       <div v-if="isDifferent">
@@ -119,9 +123,12 @@ const columns = [
           </div>
         </a-button>
       </div>
+
       <div v-else>
         <!--        Tables metadata is in sync -->
-        <span><a-alert :message="$t('msg.info.tablesMetadataInSync')" type="success" show-icon /></span>
+        <span>
+          <a-alert :message="$t('msg.info.tablesMetadataInSync')" type="success" show-icon />
+        </span>
       </div>
     </div>
   </div>
diff --git a/packages/nc-gui/components/dashboard/settings/Misc.vue b/packages/nc-gui/components/dashboard/settings/Misc.vue
index fc98644a58..1a33f606b7 100644
--- a/packages/nc-gui/components/dashboard/settings/Misc.vue
+++ b/packages/nc-gui/components/dashboard/settings/Misc.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useGlobal, useProject, watch } from '#imports'
+
 const { includeM2M } = useGlobal()
 const { loadTables } = useProject()
 
@@ -10,9 +12,9 @@ watch(includeM2M, async () => await loadTables())
     <div class="flex flex-col w-full">
       <div class="flex flex-row items-center w-full mb-4 gap-2">
         <!--        Show M2M Tables -->
-        <a-checkbox v-model:checked="includeM2M" v-e="['c:themes:show-m2m-tables']" class="nc-settings-meta-misc">{{
-          $t('msg.info.showM2mTables')
-        }}</a-checkbox>
+        <a-checkbox v-model:checked="includeM2M" v-e="['c:themes:show-m2m-tables']" class="nc-settings-meta-misc">
+          {{ $t('msg.info.showM2mTables') }}
+        </a-checkbox>
       </div>
     </div>
   </div>
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 6b775a87bb..5388e54cec 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -1,19 +1,10 @@
 <script setup lang="ts">
 import type { FunctionalComponent, SVGAttributes } from 'vue'
-import AuditTab from './AuditTab.vue'
-import AppStore from './AppStore.vue'
-import Metadata from './Metadata.vue'
-import UIAcl from './UIAcl.vue'
-import Misc from './Misc.vue'
-import Erd from './Erd.vue'
-import { useNuxtApp } from '#app'
-import { useI18n, useUIPermission, useVModel, watch } from '#imports'
-import ApiTokenManagement from '~/components/tabs/auth/ApiTokenManagement.vue'
-import UserManagement from '~/components/tabs/auth/UserManagement.vue'
+import { useI18n, useNuxtApp, useUIPermission, useVModel, watch } from '#imports'
 import StoreFrontOutline from '~icons/mdi/storefront-outline'
 import TeamFillIcon from '~icons/ri/team-fill'
 import MultipleTableIcon from '~icons/mdi/table-multiple'
-import NootbookOutline from '~icons/mdi/notebook-outline'
+import NotebookOutline from '~icons/mdi/notebook-outline'
 
 interface Props {
   modelValue: boolean
@@ -59,7 +50,7 @@ const tabsInfo: TabGroup = {
             usersManagement: {
               // Users Management
               title: t('title.userMgmt'),
-              body: UserManagement,
+              body: () => import('../../tabs/auth/UserManagement.vue'),
             },
           }
         : {}),
@@ -68,7 +59,7 @@ const tabsInfo: TabGroup = {
             apiTokenManagement: {
               // API Tokens Management
               title: t('title.apiTokenMgmt'),
-              body: ApiTokenManagement,
+              body: () => import('../../tabs/auth/ApiTokenManagement.vue'),
             },
           }
         : {}),
@@ -86,7 +77,7 @@ const tabsInfo: TabGroup = {
           subTabs: {
             new: {
               title: 'Apps',
-              body: AppStore,
+              body: () => import('./AppStore.vue'),
             },
           },
           onClick: () => {
@@ -103,26 +94,26 @@ const tabsInfo: TabGroup = {
       metaData: {
         // Metadata
         title: t('title.metadata'),
-        body: Metadata,
+        body: () => import('./Metadata.vue'),
       },
       acl: {
         // UI Access Control
         title: t('title.uiACL'),
-        body: UIAcl,
+        body: () => import('./UIAcl.vue'),
         onClick: () => {
           $e('c:table:ui-acl')
         },
       },
       erd: {
         title: t('title.erdView'),
-        body: Erd,
+        body: () => import('./Erd.vue'),
         onClick: () => {
           $e('c:settings:erd')
         },
       },
       misc: {
         title: t('general.misc'),
-        body: Misc,
+        body: () => import('./Misc.vue'),
       },
     },
     onClick: () => {
@@ -132,12 +123,12 @@ const tabsInfo: TabGroup = {
   audit: {
     // Audit
     title: t('title.audit'),
-    icon: NootbookOutline,
+    icon: NotebookOutline,
     subTabs: {
       audit: {
         // Audit
         title: t('title.audit'),
-        body: AuditTab,
+        body: () => import('./AuditTab.vue'),
       },
     },
     onClick: () => {
diff --git a/packages/nc-gui/components/dashboard/settings/UIAcl.vue b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
index 145d74aaa8..4b27998175 100644
--- a/packages/nc-gui/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
@@ -1,8 +1,17 @@
 <script setup lang="ts">
-import { Empty, message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import { extractSdkResponseErrorMsg, viewIcons } from '~/utils'
-import { computed, h, useNuxtApp, useProject } from '#imports'
+import {
+  Empty,
+  computed,
+  extractSdkResponseErrorMsg,
+  h,
+  message,
+  onMounted,
+  useGlobal,
+  useI18n,
+  useNuxtApp,
+  useProject,
+  viewIcons,
+} from '#imports'
 
 const { t } = useI18n()
 
@@ -109,12 +118,14 @@ const columns = [
             <MdiMagnify />
           </template>
         </a-input>
+
         <a-button class="self-start nc-acl-reload" @click="loadTableList">
           <div class="flex items-center gap-2 text-gray-600 font-light">
             <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
             Reload
           </div>
         </a-button>
+
         <a-button class="self-start nc-acl-save" @click="saveUIAcl">
           <div class="flex items-center gap-2 text-gray-600 font-light">
             <MdiContentSave />
@@ -122,6 +133,7 @@ const columns = [
           </div>
         </a-button>
       </div>
+
       <div class="max-h-600px overflow-y-auto">
         <a-table
           class="w-full"
@@ -140,14 +152,17 @@ const columns = [
           <template #emptyText>
             <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
           </template>
+
           <template #bodyCell="{ record, column }">
             <div v-if="column.name === 'table_name'">{{ record._ptn }}</div>
+
             <div v-if="column.name === 'view_name'">
               <div class="flex items-center">
                 <component :is="viewIcons[record.type].icon" :class="`text-${viewIcons[record.type].color} mr-1`" />
                 {{ record.title }}
               </div>
             </div>
+
             <div v-for="role in roles" :key="role">
               <div v-if="column.name === role">
                 <a-tooltip>
@@ -157,11 +172,12 @@ const columns = [
                     >
                     <span v-else>Click to hide '{{ record.title }}' for role:{{ role }} in UI dashboard</span>
                   </template>
+
                   <a-checkbox
                     :checked="!record.disabled[role]"
                     :class="`nc-acl-${record.title}-${role}-chkbox`"
                     @change="onRoleCheck(record, role)"
-                  ></a-checkbox>
+                  />
                 </a-tooltip>
               </div>
             </div>
diff --git a/packages/nc-gui/components/dashboard/settings/app-store/AppInstall.vue b/packages/nc-gui/components/dashboard/settings/app-store/AppInstall.vue
index cb86b9538e..9dce3c6e6a 100644
--- a/packages/nc-gui/components/dashboard/settings/app-store/AppInstall.vue
+++ b/packages/nc-gui/components/dashboard/settings/app-store/AppInstall.vue
@@ -1,19 +1,10 @@
 <script setup lang="ts">
-import { message } from 'ant-design-vue'
 import type { PluginType } from 'nocodb-sdk'
-import { useI18n } from 'vue-i18n'
-import { extractSdkResponseErrorMsg, ref, useNuxtApp } from '#imports'
+import { extractSdkResponseErrorMsg, message, onMounted, ref, useI18n, useNuxtApp } from '#imports'
 
-interface Props {
+const { id } = defineProps<{
   id: string
-}
-
-type Plugin = PluginType & {
-  formDetails: Record<string, any>
-  parsedInput: Record<string, any>
-}
-
-const { id } = defineProps<Props>()
+}>()
 
 const emits = defineEmits(['saved', 'close'])
 
@@ -22,6 +13,11 @@ enum Action {
   Test = 'test',
 }
 
+type Plugin = PluginType & {
+  formDetails: Record<string, any>
+  parsedInput: Record<string, any>
+}
+
 const { $api } = useNuxtApp()
 
 const formRef = ref()
@@ -29,8 +25,11 @@ const formRef = ref()
 const { t } = useI18n()
 
 let plugin = $ref<Plugin | null>(null)
+
 let pluginFormData = $ref<Record<string, any>>({})
+
 let isLoading = $ref(true)
+
 let loadingAction = $ref<null | Action>(null)
 
 const layout = {
@@ -153,6 +152,7 @@ onMounted(async () => {
 
           <span class="font-semibold text-lg">{{ plugin.formDetails.title }}</span>
         </div>
+
         <div class="absolute -right-2 -top-0.5">
           <a-button type="text" class="!rounded-md mr-1" @click="emits('close')">
             <template #icon>
@@ -175,6 +175,7 @@ onMounted(async () => {
                 </th>
               </tr>
             </thead>
+
             <tbody>
               <tr v-for="(itemRow, itemIndex) in plugin.parsedInput" :key="itemIndex">
                 <td v-for="(columnData, columnIndex) in plugin.formDetails.items" :key="columnIndex" class="px-2">
@@ -188,17 +189,21 @@ onMounted(async () => {
                       v-model:value="itemRow[columnData.key]"
                       :placeholder="columnData.placeholder"
                     />
+
                     <a-textarea
                       v-else-if="columnData.type === 'LongText'"
                       v-model:value="itemRow[columnData.key]"
                       :placeholder="columnData.placeholder"
                     />
+
                     <a-switch
                       v-else-if="columnData.type === 'Checkbox'"
                       v-model:value="itemRow[columnData.key]"
                       :placeholder="columnData.placeholder"
                     />
+
                     <a-input v-else v-model:value="itemRow[columnData.key]" :placeholder="columnData.placeholder" />
+
                     <div
                       v-if="itemIndex !== 0 && columnIndex === plugin.formDetails.items.length - 1"
                       class="absolute flex flex-col justify-start mt-2 -right-6 top-0"
@@ -236,19 +241,23 @@ onMounted(async () => {
               v-model:value="pluginFormData[columnData.key]"
               :placeholder="columnData.placeholder"
             />
+
             <a-textarea
               v-else-if="columnData.type === 'LongText'"
               v-model:value="pluginFormData[columnData.key]"
               :placeholder="columnData.placeholder"
             />
+
             <a-switch
               v-else-if="columnData.type === 'Checkbox'"
               v-model:checked="pluginFormData[columnData.key]"
               :placeholder="columnData.placeholder"
             />
+
             <a-input v-else v-model:value="pluginFormData[columnData.key]" :placeholder="columnData.placeholder" />
           </a-form-item>
         </template>
+
         <div class="flex flex-row space-x-4 justify-center mt-4">
           <a-button
             v-for="(action, i) in plugin.formDetails.actions"
@@ -265,5 +274,3 @@ onMounted(async () => {
     </div>
   </template>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/packages/nc-gui/components/dlg/AirtableImport.vue b/packages/nc-gui/components/dlg/AirtableImport.vue
index f5278df1cf..70ca2791d7 100644
--- a/packages/nc-gui/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui/components/dlg/AirtableImport.vue
@@ -2,11 +2,12 @@
 import type { Socket } from 'socket.io-client'
 import io from 'socket.io-client'
 import type { Card as AntCard } from 'ant-design-vue'
-import { Form, message } from 'ant-design-vue'
 import {
+  Form,
   computed,
   extractSdkResponseErrorMsg,
   fieldRequiredValidator,
+  message,
   nextTick,
   onBeforeUnmount,
   onMounted,
@@ -17,11 +18,9 @@ import {
   watch,
 } from '#imports'
 
-interface Props {
+const { modelValue } = defineProps<{
   modelValue: boolean
-}
-
-const { modelValue } = defineProps<Props>()
+}>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -337,9 +336,9 @@ onBeforeUnmount(() => {
           <!--          This feature is currently in beta and more information can be found here -->
           <div>
             {{ $t('general.betaNote') }}
-            <a class="prose-sm" href="https://github.com/nocodb/nocodb/discussions/2122" target="_blank">{{
-              $t('general.moreInfo')
-            }}</a>
+            <a class="prose-sm" href="https://github.com/nocodb/nocodb/discussions/2122" target="_blank">
+              {{ $t('general.moreInfo') }}
+            </a>
             .
           </div>
         </div>
diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index d7e2567063..e2f7629ca3 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Form, message } from 'ant-design-vue'
 import type { TableType } from 'nocodb-sdk'
 import type { UploadChangeParam, UploadFile } from 'ant-design-vue'
 import {
   ExcelTemplateAdapter,
   ExcelUrlTemplateAdapter,
+  Form,
   JSONTemplateAdapter,
   JSONUrlTemplateAdapter,
   computed,
@@ -13,6 +13,7 @@ import {
   importCsvUrlValidator,
   importExcelUrlValidator,
   importUrlValidator,
+  message,
   reactive,
   ref,
   useI18n,
@@ -294,7 +295,7 @@ const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => {
       <div class="prose-xl font-weight-bold my-5">{{ importMeta.header }}</div>
 
       <div class="mt-5">
-        <TemplateEditor
+        <LazyTemplateEditor
           v-if="templateEditorModal"
           ref="templateEditorRef"
           :project-template="templateData"
@@ -350,7 +351,7 @@ const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => {
             </template>
 
             <div class="pb-3 pt-3">
-              <MonacoEditor ref="jsonEditorRef" v-model="importState.jsonEditor" class="min-h-60 max-h-80" />
+              <LazyMonacoEditor ref="jsonEditorRef" v-model="importState.jsonEditor" class="min-h-60 max-h-80" />
             </div>
           </a-tab-pane>
 
diff --git a/packages/nc-gui/components/dlg/TableCreate.vue b/packages/nc-gui/components/dlg/TableCreate.vue
index 20c4161e8e..77718878af 100644
--- a/packages/nc-gui/components/dlg/TableCreate.vue
+++ b/packages/nc-gui/components/dlg/TableCreate.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { Form } from 'ant-design-vue'
-import { computed, onMounted, ref, useProject, useTable, useTabs, useVModel, validateTableName } from '#imports'
-import { TabType } from '~/composables'
+import { Form, computed, onMounted, ref, useProject, useTable, useTabs, useVModel, validateTableName } from '#imports'
+import { TabType } from '~/lib'
 
-interface Props {
+const props = defineProps<{
   modelValue: boolean
-}
-
-const props = defineProps<Props>()
+}>()
 
 const emit = defineEmits(['update:modelValue'])
 
diff --git a/packages/nc-gui/components/dlg/TableRename.vue b/packages/nc-gui/components/dlg/TableRename.vue
index 8398f319b9..1a6097fb88 100644
--- a/packages/nc-gui/components/dlg/TableRename.vue
+++ b/packages/nc-gui/components/dlg/TableRename.vue
@@ -1,11 +1,20 @@
 <script setup lang="ts">
-import { watchEffect } from '@vue/runtime-core'
-import { Form, message } from 'ant-design-vue'
 import type { TableType } from 'nocodb-sdk'
-import { useI18n } from 'vue-i18n'
-import { useMetas, useProject, useTabs } from '#imports'
-import { extractSdkResponseErrorMsg, validateTableName } from '~/utils'
-import { useNuxtApp } from '#app'
+import {
+  Form,
+  computed,
+  extractSdkResponseErrorMsg,
+  message,
+  nextTick,
+  reactive,
+  useI18n,
+  useMetas,
+  useNuxtApp,
+  useProject,
+  useTabs,
+  validateTableName,
+  watchEffect,
+} from '#imports'
 
 interface Props {
   modelValue?: boolean
@@ -32,14 +41,19 @@ const dialogShow = computed({
 })
 
 const { updateTab } = useTabs()
+
 const { loadTables, tables, project, isMysql, isMssql, isPg } = useProject()
 
 const inputEl = $ref<any>()
+
 let loading = $ref(false)
+
 const useForm = Form.useForm
+
 const formState = reactive({
   title: '',
 })
+
 const validators = computed(() => {
   return {
     title: [
@@ -83,6 +97,7 @@ const validators = computed(() => {
     ],
   }
 })
+
 const { validateInfos } = useForm(formState, validators)
 
 watchEffect(() => {
@@ -102,12 +117,15 @@ const renameTable = async () => {
       project_id: tableMeta?.project_id,
       table_name: formState.title,
     })
+
     dialogShow.value = false
-    loadTables()
+
+    await loadTables()
+
     updateTab({ id: tableMeta?.id }, { title: formState.title })
 
     // update metas
-    setMeta(await $api.dbTable.read(tableMeta?.id as string))
+    await setMeta(await $api.dbTable.read(tableMeta?.id as string))
 
     // Table renamed successfully
     message.success(t('msg.success.tableRenamed'))
@@ -116,6 +134,7 @@ const renameTable = async () => {
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
+
   loading = false
 }
 </script>
@@ -131,12 +150,15 @@ const renameTable = async () => {
   >
     <template #footer>
       <a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
+
       <a-button key="submit" type="primary" :loading="loading" @click="renameTable">{{ $t('general.submit') }}</a-button>
     </template>
+
     <div class="pl-10 pr-10 pt-5">
       <a-form :model="formState" name="create-new-table-form">
         <!-- hint="Enter table name" -->
         <div class="mb-2">{{ $t('msg.info.enterTableName') }}</div>
+
         <a-form-item v-bind="validateInfos.title">
           <a-input
             ref="inputEl"
diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index 933e94c434..df085e9e06 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -1,14 +1,24 @@
 <script setup lang="ts">
 import type { ComponentPublicInstance } from '@vue/runtime-core'
-import { message } from 'ant-design-vue'
 import type { Form as AntForm } from 'ant-design-vue'
-import { capitalize, inject } from '@vue/runtime-core'
+import { capitalize } from '@vue/runtime-core'
 import type { FormType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
-import { useI18n } from 'vue-i18n'
-import { MetaInj, ViewListInj } from '~/context'
-import { generateUniqueTitle } from '~/utils'
-import { computed, nextTick, reactive, unref, useApi, useVModel, watch } from '#imports'
+import {
+  MetaInj,
+  ViewListInj,
+  computed,
+  generateUniqueTitle,
+  inject,
+  message,
+  nextTick,
+  reactive,
+  unref,
+  useApi,
+  useI18n,
+  useVModel,
+  watch,
+} from '#imports'
 
 interface Props {
   modelValue: boolean
diff --git a/packages/nc-gui/components/dlg/ViewDelete.vue b/packages/nc-gui/components/dlg/ViewDelete.vue
index 76a2f9c3a5..5614a8bd91 100644
--- a/packages/nc-gui/components/dlg/ViewDelete.vue
+++ b/packages/nc-gui/components/dlg/ViewDelete.vue
@@ -1,12 +1,6 @@
 <script lang="ts" setup>
-import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import { extractSdkResponseErrorMsg } from '~/utils'
-import { onKeyStroke, useApi, useNuxtApp, useVModel } from '#imports'
+import { extractSdkResponseErrorMsg, message, onKeyStroke, useApi, useI18n, useNuxtApp, useVModel } from '#imports'
 
-const props = defineProps<Props>()
-const emits = defineEmits<Emits>()
-const { t } = useI18n()
 interface Props {
   modelValue: boolean
   view?: Record<string, any>
@@ -17,6 +11,12 @@ interface Emits {
   (event: 'deleted'): void
 }
 
+const props = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+
+const { t } = useI18n()
+
 const vModel = useVModel(props, 'modelValue', emits)
 
 const { api, isLoading } = useApi()
@@ -55,9 +55,10 @@ async function onDelete() {
 
     <template #footer>
       <a-button key="back" @click="vModel = false">{{ $t('general.cancel') }}</a-button>
-      <a-button key="submit" danger html-type="submit" :loading="isLoading" @click="onDelete">{{
-        $t('general.submit')
-      }}</a-button>
+
+      <a-button key="submit" danger html-type="submit" :loading="isLoading" @click="onDelete">
+        {{ $t('general.submit') }}
+      </a-button>
     </template>
   </a-modal>
 </template>
diff --git a/packages/nc-gui/components/general/ChromeWrapper.vue b/packages/nc-gui/components/general/ChromeWrapper.vue
index 43028707a5..aa9d7c717e 100644
--- a/packages/nc-gui/components/general/ChromeWrapper.vue
+++ b/packages/nc-gui/components/general/ChromeWrapper.vue
@@ -26,5 +26,3 @@ const picked = computed({
 <template>
   <Chrome v-model="picked" />
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui/components/general/ColorModeSwitcher.vue b/packages/nc-gui/components/general/ColorModeSwitcher.vue
index 0fb6bfd30c..57d93c7dbc 100644
--- a/packages/nc-gui/components/general/ColorModeSwitcher.vue
+++ b/packages/nc-gui/components/general/ColorModeSwitcher.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import MaterialSymbolsLightMode from '~icons/material-symbols/light-mode'
-import MaterialSymbolsDarkMode from '~icons/material-symbols/dark-mode'
 interface Props {
   modelValue: boolean
 }
diff --git a/packages/nc-gui/components/general/ColorPicker.vue b/packages/nc-gui/components/general/ColorPicker.vue
index 5302c398ab..e2c1a2fb85 100644
--- a/packages/nc-gui/components/general/ColorPicker.vue
+++ b/packages/nc-gui/components/general/ColorPicker.vue
@@ -57,14 +57,16 @@ watch(picked, (n, _o) => {
         {{ compare(picked, color) ? '&#10003;' : '' }}
       </button>
     </div>
+
     <a-card v-if="props.advanced" class="w-full mt-2" :body-style="{ padding: '0px' }" :bordered="false">
       <a-collapse accordion ghost expand-icon-position="right">
         <a-collapse-panel key="1" header="Advanced" class="">
           <a-button v-if="props.pickButton" class="!bg-primary text-white w-full" @click="selectColor(picked)">
             Pick Color
           </a-button>
+
           <div class="flex justify-center py-4">
-            <GeneralChromeWrapper v-model="picked" class="!w-full !shadow-none" />
+            <LazyGeneralChromeWrapper v-model="picked" class="!w-full !shadow-none" />
           </div>
         </a-collapse-panel>
       </a-collapse>
diff --git a/packages/nc-gui/components/general/FlippingCard.vue b/packages/nc-gui/components/general/FlippingCard.vue
index 21b72fe0f8..15ad0368e2 100644
--- a/packages/nc-gui/components/general/FlippingCard.vue
+++ b/packages/nc-gui/components/general/FlippingCard.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { onBeforeUnmount, onMounted, watch } from '#imports'
+
 type FlipTrigger = 'hover' | 'click' | { duration: number }
 
 interface Props {
@@ -12,7 +14,9 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 let flipped = $ref(false)
+
 let hovered = $ref(false)
+
 let flipTimer = $ref<NodeJS.Timer | null>(null)
 
 onMounted(() => {
@@ -76,6 +80,7 @@ watch($$(flipped), () => {
       >
         <slot name="front" />
       </div>
+
       <div
         class="back"
         :style="{ 'pointer-events': flipped ? 'auto' : 'none', 'opacity': !isFlipping ? (flipped ? 100 : 0) : flipped ? 0 : 100 }"
diff --git a/packages/nc-gui/components/general/FullScreen.vue b/packages/nc-gui/components/general/FullScreen.vue
index 53694bb1b9..b1983b2bbf 100644
--- a/packages/nc-gui/components/general/FullScreen.vue
+++ b/packages/nc-gui/components/general/FullScreen.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { useSidebar } from '#imports'
+import { computed, useSidebar } from '#imports'
 
 const rightSidebar = useSidebar('nc-right-sidebar')
+
 const leftSidebar = useSidebar('nc-left-sidebar')
 
 const isSidebarsOpen = computed({
diff --git a/packages/nc-gui/components/general/HelpAndSupport.vue b/packages/nc-gui/components/general/HelpAndSupport.vue
index 2695a12d81..106ecc506e 100644
--- a/packages/nc-gui/components/general/HelpAndSupport.vue
+++ b/packages/nc-gui/components/general/HelpAndSupport.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useGlobal, useProject } from '#imports'
+import { ref, useGlobal, useProject, useRoute } from '#imports'
 
 const showDrawer = ref(false)
 
@@ -20,6 +20,7 @@ const openSwaggerLink = () => {
     @click="showDrawer = true"
   >
     <MdiCommentTextOutline class="mr-1" />
+
     <!-- APIs & Support -->
     <div>{{ $t('title.APIsAndSupport') }}</div>
   </div>
@@ -37,11 +38,13 @@ const openSwaggerLink = () => {
       <!-- Help center -->
       <a-typography-title :level="4" class="!mb-6 !text-gray-500">{{ $t('title.helpCenter') }}</a-typography-title>
 
-      <GeneralSocialCard class="!w-full nc-social-card">
+      <LazyGeneralSocialCard class="!w-full nc-social-card">
         <template #before>
           <a-list-item v-if="project">
             <nuxt-link
               v-e="['a:navbar:user:swagger']"
+              no-prefetch
+              no-rel
               class="!no-underline !text-current py-4 font-semibold"
               target="_blank"
               @click="openSwaggerLink"
@@ -54,7 +57,8 @@ const openSwaggerLink = () => {
             </nuxt-link>
           </a-list-item>
         </template>
-      </GeneralSocialCard>
+      </LazyGeneralSocialCard>
+
       <div class="min-h-10 w-full" />
     </div>
   </a-drawer>
diff --git a/packages/nc-gui/components/general/MiniSidebar.vue b/packages/nc-gui/components/general/MiniSidebar.vue
index c90c271cc5..aa1f87d878 100644
--- a/packages/nc-gui/components/general/MiniSidebar.vue
+++ b/packages/nc-gui/components/general/MiniSidebar.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { navigateTo } from '#app'
-import { computed, useGlobal, useProject, useRoute, useSidebar } from '#imports'
+import { computed, navigateTo, useGlobal, useProject, useRoute, useSidebar } from '#imports'
 
 const { signOut, signedIn, user, currentVersion } = useGlobal()
 
diff --git a/packages/nc-gui/components/general/ReleaseInfo.vue b/packages/nc-gui/components/general/ReleaseInfo.vue
index a3b0441aaf..14d9a3a595 100644
--- a/packages/nc-gui/components/general/ReleaseInfo.vue
+++ b/packages/nc-gui/components/general/ReleaseInfo.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { message } from 'ant-design-vue'
-import { extractSdkResponseErrorMsg, onMounted } from '#imports'
+import { computed, extractSdkResponseErrorMsg, message, onMounted, useGlobal, useNuxtApp } from '#imports'
 
 const { $api } = useNuxtApp()
 
@@ -47,22 +46,38 @@ onMounted(async () => await fetchReleaseInfo())
           <mdi-menu-down />
         </div>
       </a-button>
+
       <template #overlay>
         <div class="mt-1 bg-white shadow-lg !border">
-          <nuxt-link class="!text-primary !no-underline" to="https://github.com/nocodb/nocodb/releases" target="_blank">
+          <nuxt-link
+            no-prefetch
+            no-rel
+            class="!text-primary !no-underline"
+            to="https://github.com/nocodb/nocodb/releases"
+            target="_blank"
+          >
             <div class="nc-menu-item">
               <mdi-script-text-outline />
               {{ latestRelease }} {{ $t('activity.upgrade.releaseNote') }}
             </div>
           </nuxt-link>
-          <nuxt-link class="!text-primary !no-underline" to="https://docs.nocodb.com/getting-started/upgrading" target="_blank">
+
+          <nuxt-link
+            no-prefetch
+            no-rel
+            class="!text-primary !no-underline"
+            to="https://docs.nocodb.com/getting-started/upgrading"
+            target="_blank"
+          >
             <div class="nc-menu-item">
               <mdi-rocket-launch-outline />
               <!-- How to upgrade? -->
               {{ $t('activity.upgrade.howTo') }}
             </div>
           </nuxt-link>
+
           <a-divider class="!m-0" />
+
           <div class="nc-menu-item" @click="releaseAlert = false">
             <mdi-close />
             <!-- Hide menu -->
diff --git a/packages/nc-gui/components/general/Share.vue b/packages/nc-gui/components/general/Share.vue
index 6ff28b21db..c14fa611f0 100644
--- a/packages/nc-gui/components/general/Share.vue
+++ b/packages/nc-gui/components/general/Share.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { computed } from '#imports'
+
 interface Props {
   url: string
   socialMedias: string[]
diff --git a/packages/nc-gui/components/general/ShareBaseButton.vue b/packages/nc-gui/components/general/ShareBaseButton.vue
index b81e0c4d10..b2909677a5 100644
--- a/packages/nc-gui/components/general/ShareBaseButton.vue
+++ b/packages/nc-gui/components/general/ShareBaseButton.vue
@@ -21,10 +21,11 @@ const { isUIAllowed } = useUIPermission()
     >
       <div class="flex items-center space-x-1">
         <MdiAccountPlusOutline class="mr-1 nc-share-base" />
+
         <div>{{ $t('activity.inviteTeam') }}</div>
       </div>
     </div>
 
-    <TabsAuthUserManagementUsersModal :key="showUserModal" :show="showUserModal" @closed="showUserModal = false" />
+    <LazyTabsAuthUserManagementUsersModal :key="showUserModal" :show="showUserModal" @closed="showUserModal = false" />
   </div>
 </template>
diff --git a/packages/nc-gui/components/general/Social.vue b/packages/nc-gui/components/general/Social.vue
index 53adcad83e..5500199ac2 100644
--- a/packages/nc-gui/components/general/Social.vue
+++ b/packages/nc-gui/components/general/Social.vue
@@ -1,9 +1,5 @@
 <script lang="ts" setup>
-import { useI18n } from 'vue-i18n'
-import MdiDiscord from '~icons/mdi/discord'
-import MdiReddit from '~icons/mdi/reddit'
-import MdiTwitter from '~icons/mdi/twitter'
-import MdiCalendarMonth from '~icons/mdi/calendar-month'
+import { useI18n } from '#imports'
 
 const { locale } = useI18n()
 
@@ -24,6 +20,7 @@ const isZhLang = $computed(() => locale.value.startsWith('zh'))
 
   <div v-else class="flex justify-between gap-1 w-full px-2">
     <MdiDiscord v-e="['e:community:discord']" class="icon text-[#7289DA]" @click="open('https://discord.gg/5RgZmkW')" />
+
     <div
       v-e="['e:community:discourse']"
       class="icon flex items-center justify-center min-w-[43px]"
@@ -31,8 +28,11 @@ const isZhLang = $computed(() => locale.value.startsWith('zh'))
     >
       <div class="discourse" />
     </div>
+
     <MdiReddit v-e="['e:community:reddit']" class="icon text-[#FF4600]" @click="open('https://www.reddit.com/r/NocoDB/')" />
+
     <MdiTwitter v-e="['e:community:twitter']" class="icon text-[#1DA1F2]" @click="open('https://twitter.com/NocoDB')" />
+
     <MdiCalendarMonth
       v-e="['e:community:book-demo']"
       class="icon text-green-500"
diff --git a/packages/nc-gui/components/general/SocialCard.vue b/packages/nc-gui/components/general/SocialCard.vue
index 9588b5afbe..a94567b2fb 100644
--- a/packages/nc-gui/components/general/SocialCard.vue
+++ b/packages/nc-gui/components/general/SocialCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { enumColor as colors } from '#imports'
+import { enumColor as colors, useGlobal } from '#imports'
 
 const { lang: currentLang } = useGlobal()
 
@@ -26,6 +26,7 @@ const isRtlLang = $computed(() => ['fa', 'ar'].includes(currentLang.value))
           </div>
         </nuxt-link>
       </a-list-item>
+
       <a-list-item>
         <nuxt-link
           v-e="['e:api-docs']"
@@ -42,6 +43,7 @@ const isRtlLang = $computed(() => ['fa', 'ar'].includes(currentLang.value))
           </div>
         </nuxt-link>
       </a-list-item>
+
       <a-list-item>
         <nuxt-link
           v-e="['e:community:github']"
@@ -70,6 +72,7 @@ const isRtlLang = $computed(() => ['fa', 'ar'].includes(currentLang.value))
           </div>
         </nuxt-link>
       </a-list-item>
+
       <a-list-item>
         <nuxt-link
           v-e="['e:community:book-demo']"
@@ -88,6 +91,7 @@ const isRtlLang = $computed(() => ['fa', 'ar'].includes(currentLang.value))
           </div>
         </nuxt-link>
       </a-list-item>
+
       <a-list-item>
         <nuxt-link
           v-e="['e:community:discord']"
@@ -106,6 +110,7 @@ const isRtlLang = $computed(() => ['fa', 'ar'].includes(currentLang.value))
           </div>
         </nuxt-link>
       </a-list-item>
+
       <a-list-item>
         <nuxt-link
           v-e="['e:community:twitter']"
@@ -124,6 +129,7 @@ const isRtlLang = $computed(() => ['fa', 'ar'].includes(currentLang.value))
           </div>
         </nuxt-link>
       </a-list-item>
+
       <a-list-item>
         <nuxt-link
           v-e="['e:hiring']"
@@ -141,6 +147,7 @@ const isRtlLang = $computed(() => ['fa', 'ar'].includes(currentLang.value))
           </div>
         </nuxt-link>
       </a-list-item>
+
       <a-list-item>
         <nuxt-link
           v-e="['e:community:reddit']"
diff --git a/packages/nc-gui/components/general/Tooltip.vue b/packages/nc-gui/components/general/Tooltip.vue
index 85d506f256..57efc34135 100644
--- a/packages/nc-gui/components/general/Tooltip.vue
+++ b/packages/nc-gui/components/general/Tooltip.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { onKeyStroke } from '@vueuse/core'
+import { ref, watch } from '#imports'
 
 interface Props {
   // Key to be pressed on hover to trigger the tooltip
@@ -7,9 +8,10 @@ interface Props {
   wrapperClass?: string
 }
 
-const { modifierKey } = defineProps<Props>()
+const { modifierKey, wrapperClass } = defineProps<Props>()
 
 const showTooltip = ref(false)
+
 const isMouseOver = ref(false)
 
 if (modifierKey) {
diff --git a/packages/nc-gui/components/general/TruncateText.vue b/packages/nc-gui/components/general/TruncateText.vue
index c5b95f6fe9..01b74659d9 100644
--- a/packages/nc-gui/components/general/TruncateText.vue
+++ b/packages/nc-gui/components/general/TruncateText.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { computed, ref } from '#imports'
+
 interface Props {
   placement?:
     | 'top'
@@ -16,29 +18,31 @@ interface Props {
   length?: number
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  placement: 'bottom',
-  length: 20,
-})
+const { placement = 'bottom', length = 20 } = defineProps<Props>()
 
 const text = ref()
-const enableTooltip = computed(() => text?.value?.textContent.length > props.length)
+
+const enableTooltip = computed(() => text.value?.textContent.length > length)
+
 const shortName = computed(() =>
-  text?.value?.textContent.length > props.length
-    ? `${text?.value?.textContent.substr(0, props.length - 3)}...`
-    : text?.value?.textContent,
+  text.value?.textContent.length > length ? `${text.value?.textContent.substr(0, length - 3)}...` : text.value?.textContent,
 )
 </script>
 
 <template>
-  <a-tooltip v-if="enableTooltip" :placement="props.placement">
+  <a-tooltip v-if="enableTooltip" :placement="placement">
     <template #title>
-      <slot></slot>
+      <slot />
     </template>
+
     <div>{{ shortName }}</div>
   </a-tooltip>
-  <div v-else><slot></slot></div>
-  <div ref="text" class="hidden"><slot></slot></div>
-</template>
 
-<style scoped></style>
+  <div v-else>
+    <slot />
+  </div>
+
+  <div ref="text" class="hidden">
+    <slot />
+  </div>
+</template>
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 1c3389f79f..0201d095f5 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -25,7 +25,7 @@ import {
   useViewData,
   watch,
 } from '#imports'
-import type { Permission } from '~/composables/useUIPermission/rolePermissions'
+import type { Permission } from '~/lib'
 
 provide(IsFormInj, ref(true))
 provide(IsGalleryInj, ref(false))
diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 678fa0c791..f38159c748 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -25,7 +25,7 @@ import {
   useViewData,
   watch,
 } from '#imports'
-import type { Row as RowType } from '~/composables'
+import type { Row as RowType } from '~/lib'
 
 interface Attachment {
   url: string
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 6f5ca129d4..43d2987f20 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -34,7 +34,7 @@ import {
   useViewData,
   watch,
 } from '#imports'
-import type { Row } from '~/composables'
+import type { Row } from '~/lib'
 import { NavigateDir } from '~/lib'
 
 const { t } = useI18n()
diff --git a/packages/nc-gui/components/smartsheet/Row.vue b/packages/nc-gui/components/smartsheet/Row.vue
index e5a3da0f54..9950f567b8 100644
--- a/packages/nc-gui/components/smartsheet/Row.vue
+++ b/packages/nc-gui/components/smartsheet/Row.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Row } from '~/composables'
+import type { Row } from '~/lib'
 import {
   ReloadRowDataHookInj,
   ReloadViewDataHookInj,
diff --git a/packages/nc-gui/components/smartsheet/VirtualCell.vue b/packages/nc-gui/components/smartsheet/VirtualCell.vue
index b0c409aa16..aae2057493 100644
--- a/packages/nc-gui/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/VirtualCell.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { ActiveCellInj, CellValueInj, ColumnInj, RowInj, provide, toRef, useVirtualCell } from '#imports'
-import type { Row } from '~/composables'
+import type { Row } from '~/lib'
 import { NavigateDir } from '~/lib'
 
 const props = defineProps<{
diff --git a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
index 5de73e1b14..61c151f4e1 100644
--- a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
@@ -100,7 +100,11 @@ watch(inputs, () => {
             overlay-class-name="nc-dropdown-select-color-options"
           >
             <template #overlay>
-              <LazyGeneralColorPicker v-model="element.color" :pick-button="true" @update:model-value="colorMenus[index] = false" />
+              <LazyGeneralColorPicker
+                v-model="element.color"
+                :pick-button="true"
+                @update:model-value="colorMenus[index] = false"
+              />
             </template>
             <MdiArrowDownDropCircle :style="{ 'font-size': '1.5em', 'color': element.color }" class="mr-2" />
           </a-dropdown>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index e0cb77f83f..9906e0bc89 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -18,7 +18,7 @@ import {
   useVModel,
   watch,
 } from '#imports'
-import type { Row } from '~/composables'
+import type { Row } from '~/lib'
 
 interface Props {
   modelValue?: boolean
diff --git a/packages/nc-gui/components/smartsheet/header/Menu.vue b/packages/nc-gui/components/smartsheet/header/Menu.vue
index d048dd43dc..9f8d9e1d6a 100644
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet/header/Menu.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { Modal } from 'ant-design-vue'
 import type { LinkToAnotherRecordType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import {
   ColumnInj,
   IsLockedInj,
   MetaInj,
+  Modal,
   extractSdkResponseErrorMsg,
   inject,
   message,
diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
index a9264b1e2b..43e689586e 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
@@ -12,7 +12,6 @@ import {
   message,
   onMounted,
   ref,
-  resolveComponent,
   useApi,
   useDialog,
   useI18n,
@@ -189,7 +188,7 @@ async function onRename(view: ViewType) {
 function openDeleteDialog(view: Record<string, any>) {
   const isOpen = ref(true)
 
-  const { close } = useDialog(resolveComponent('LazyDlgViewDelete') as any, {
+  const { close } = useDialog(() => import('~/components/dlg/ViewDelete.vue'), {
     'modelValue': isOpen,
     'view': view,
     'onUpdate:modelValue': closeDialog,
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
index 6d4141c3b0..1d24f9f443 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
@@ -2,7 +2,7 @@
 import type { SelectProps } from 'ant-design-vue'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { MetaInj, computed, inject, ref, resolveComponent } from '#imports'
+import { MetaInj, computed, inject, ref } from '#imports'
 
 const { modelValue, isSort } = defineProps<{
   modelValue?: string
@@ -26,7 +26,7 @@ const options = computed<SelectProps['options']>(() =>
         return !(
           c.uidt === UITypes.LinkToAnotherRecord && (c.colOptions as LinkToAnotherRecordType).type !== RelationTypes.BELONGS_TO
         )
-        /** ignore vutual fields which are system fields ( mm relation ) */
+        /** ignore virtual fields which are system fields ( mm relation ) */
       } else {
         return !c.colOptions || !c.system
       }
@@ -34,14 +34,9 @@ const options = computed<SelectProps['options']>(() =>
     .map((c: ColumnType) => ({
       value: c.id,
       label: c.title,
-      icon: h(
-        isVirtualCol(c)
-          ? resolveComponent('LazySmartsheetHeaderVirtualCellIcon')
-          : resolveComponent('LazySmartsheetHeaderCellIcon'),
-        {
-          columnMeta: c,
-        },
-      ),
+      icon: h(isVirtualCol(c) ? () => import('../header/VirtualCellIcon.vue') : () => import('../header/CellIcon.vue'), {
+        columnMeta: c,
+      }),
       c,
     })),
 )
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 10ec229a77..0e7c6a75bf 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -111,12 +111,9 @@ const coverOptions = computed<SelectProps['options']>(() => {
 })
 
 const getIcon = (c: ColumnType) =>
-  h(
-    isVirtualCol(c) ? resolveComponent('LazySmartsheetHeaderVirtualCellIcon') : resolveComponent('LazySmartsheetHeaderCellIcon'),
-    {
-      columnMeta: c,
-    },
-  )
+  h(isVirtualCol(c) ? () => import('../header/VirtualCellIcon.vue') : () => import('../header/CellIcon.vue'), {
+    columnMeta: c,
+  })
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue b/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue
index 1522f36aff..171f4bd8e2 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ViewTypes } from 'nocodb-sdk'
-import { Empty } from 'ant-design-vue'
 import {
+  Empty,
   extractSdkResponseErrorMsg,
   message,
   onMounted,
diff --git a/packages/nc-gui/components/tabs/Auth.vue b/packages/nc-gui/components/tabs/Auth.vue
index 0d04cd4ddd..0ab9e230db 100644
--- a/packages/nc-gui/components/tabs/Auth.vue
+++ b/packages/nc-gui/components/tabs/Auth.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import UserManagement from './auth/UserManagement.vue'
-import ApiTokenManagement from './auth/ApiTokenManagement.vue'
 import { useI18n, useUIPermission } from '#imports'
 
 interface Tab {
@@ -18,13 +16,13 @@ const tabsInfo: Tab[] = [
   {
     title: 'Users Management',
     label: t('title.userMgmt'),
-    body: () => UserManagement,
+    body: () => import('./auth/UserManagement.vue'),
     isUIAllowed: () => isUIAllowed('userMgmtTab'),
   },
   {
     title: 'API Token Management',
     label: t('title.apiTokenMgmt'),
-    body: () => ApiTokenManagement,
+    body: () => import('./auth/ApiTokenManagement.vue'),
     isUIAllowed: () => isUIAllowed('apiTokenTab'),
   },
 ]
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index 97cd03a203..1efd57026c 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -17,9 +17,10 @@ import {
   ref,
   useMetas,
   useProvideSmartsheetStore,
+  useSidebar,
   watch,
 } from '#imports'
-import type { TabItem } from '~/composables'
+import type { TabItem } from '~/lib'
 
 const { activeTab } = defineProps<{
   activeTab: TabItem
@@ -37,6 +38,7 @@ provide(TabMetaInj, ref(activeTab))
 const meta = computed<TableType>(() => metas.value?.[activeTab?.id as string])
 
 const reloadEventHook = createEventHook()
+
 const reloadViewMetaEventHook = createEventHook()
 const openNewRecordFormHook = createEventHook()
 
diff --git a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
index 60be3ca554..08b1814c56 100644
--- a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
@@ -1,15 +1,6 @@
 <script setup lang="ts">
 import type { ApiTokenType } from 'nocodb-sdk'
-import { message } from 'ant-design-vue'
-import { extractSdkResponseErrorMsg, useCopy, useI18n } from '#imports'
-import KebabIcon from '~icons/ic/baseline-more-vert'
-import MdiPlusIcon from '~icons/mdi/plus'
-import CloseIcon from '~icons/material-symbols/close-rounded'
-import ReloadIcon from '~icons/mdi/reload'
-import VisibilityOpenIcon from '~icons/material-symbols/visibility'
-import VisibilityCloseIcon from '~icons/material-symbols/visibility-off'
-import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
-import MdiContentCopyIcon from '~icons/mdi/content-copy'
+import { extractSdkResponseErrorMsg, message, onMounted, useCopy, useI18n, useNuxtApp, useProject } from '#imports'
 
 interface ApiToken extends ApiTokenType {
   show?: boolean
@@ -108,13 +99,15 @@ onMounted(() => {
     <div class="relative flex flex-col h-full">
       <a-button type="text" class="!absolute top-0 right-0 rounded-md -mt-2 -mr-3" @click="showNewTokenModal = false">
         <template #icon>
-          <CloseIcon class="flex mx-auto" />
+          <MaterialSymbolsCloseRounded class="flex mx-auto" />
         </template>
       </a-button>
+
       <!-- Generate Token -->
       <div class="flex flex-row justify-center w-full -mt-1 mb-3">
         <a-typography-title :level="5">{{ $t('title.generateToken') }}</a-typography-title>
       </div>
+
       <!-- Description -->
       <a-form
         ref="form"
@@ -137,6 +130,7 @@ onMounted(() => {
       </a-form>
     </div>
   </a-modal>
+
   <a-modal
     v-model:visible="showDeleteTokenModal"
     :closable="false"
@@ -147,63 +141,73 @@ onMounted(() => {
   >
     <div class="flex flex-col h-full">
       <div class="flex flex-row justify-center mt-2 text-center w-full text-base">This action will remove this API Token</div>
+
       <div class="flex mt-6 justify-center space-x-2">
         <a-button @click="showDeleteTokenModal = false"> {{ $t('general.cancel') }} </a-button>
         <a-button type="primary" danger @click="deleteToken()"> {{ $t('general.confirm') }} </a-button>
       </div>
     </div>
   </a-modal>
+
   <div class="flex flex-col px-10 mt-6">
     <div class="flex flex-row justify-end">
       <div class="flex flex-row space-x-1">
         <a-button size="middle" type="text" @click="loadApiTokens()">
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
-            <ReloadIcon class="text-gray-500" />
+            <MdiReload class="text-gray-500" />
             <div class="text-gray-500">{{ $t('general.reload') }}</div>
           </div>
         </a-button>
+
         <!--        Add New Token -->
         <a-button size="middle" type="primary" ghost @click="openNewTokenModal">
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
-            <MdiPlusIcon />
+            <MdiPlus />
             <div>{{ $t('activity.newToken') }}</div>
           </div>
         </a-button>
       </div>
     </div>
+
     <div v-if="tokensInfo" class="w-full flex flex-col mt-2 px-1">
       <div class="flex flex-row border-b-1 text-gray-600 text-xs pb-2 pt-2">
         <div class="flex w-4/10 pl-2">{{ $t('labels.description') }}</div>
         <div class="flex w-4/10 justify-center">{{ $t('labels.token') }}</div>
         <div class="flex w-2/10 justify-end pr-2">{{ $t('labels.action') }}</div>
       </div>
+
       <div v-for="(item, index) in tokensInfo" :key="index" class="flex flex-col">
         <div class="flex flex-row border-b-1 items-center px-2 py-2">
           <div class="flex flex-row w-4/10 flex-wrap overflow-ellipsis">
             {{ item.description }}
           </div>
+
           <div class="flex w-4/10 justify-center flex-wrap overflow-ellipsis">
             <span v-if="item.show">{{ item.token }}</span>
             <span v-else>****************************************</span>
           </div>
+
           <div class="flex flex-row w-2/10 justify-end">
             <a-tooltip placement="bottom">
               <template #title>
                 <span v-if="item.show"> {{ $t('general.hide') }} </span>
                 <span v-else> {{ $t('general.show') }} </span>
               </template>
+
               <a-button type="text" class="!rounded-md" @click="item.show = !item.show">
                 <template #icon>
-                  <VisibilityCloseIcon v-if="item.show" class="flex mx-auto h-[1.1rem]" />
-                  <VisibilityOpenIcon v-else class="flex mx-auto h-[1rem]" />
+                  <MaterialSymbolsVisibilityOff v-if="item.show" class="flex mx-auto h-[1.1rem]" />
+                  <MaterialSymbolsVisibility v-else class="flex mx-auto h-[1rem]" />
                 </template>
               </a-button>
             </a-tooltip>
+
             <a-tooltip placement="bottom">
               <template #title> {{ $t('general.copy') }} </template>
+
               <a-button type="text" class="!rounded-md" @click="copyToken(item.token)">
                 <template #icon>
-                  <MdiContentCopyIcon class="flex mx-auto h-[1rem]" />
+                  <MdiContentCopy class="flex mx-auto h-[1rem]" />
                 </template>
               </a-button>
             </a-tooltip>
@@ -212,15 +216,16 @@ onMounted(() => {
               <div class="flex flex-row items-center">
                 <a-button type="text" class="!px-0">
                   <div class="flex flex-row items-center h-[1.2rem]">
-                    <KebabIcon />
+                    <IcBaselineMoreVert />
                   </div>
                 </a-button>
               </div>
+
               <template #overlay>
                 <a-menu>
                   <a-menu-item>
                     <div class="flex flex-row items-center py-3 h-[1rem]" @click="openDeleteModal(item)">
-                      <MdiDeleteOutlineIcon class="flex" />
+                      <MdiDeleteOutline class="flex" />
                       <div class="text-xs pl-2">{{ $t('general.remove') }}</div>
                     </div>
                   </a-menu-item>
diff --git a/packages/nc-gui/components/tabs/auth/UserManagement.vue b/packages/nc-gui/components/tabs/auth/UserManagement.vue
index 26ae5f1797..3de1cd63ab 100644
--- a/packages/nc-gui/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/UserManagement.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { message } from 'ant-design-vue'
 import type { RequestParams } from 'nocodb-sdk'
-import UsersModal from './user-management/UsersModal.vue'
-import FeedbackForm from './user-management/FeedbackForm.vue'
 import {
   extractSdkResponseErrorMsg,
+  message,
   onBeforeMount,
   ref,
   useApi,
@@ -169,13 +167,14 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
   </div>
 
   <div v-else class="flex flex-col w-full px-6">
-    <UsersModal
+    <LazyTabsAuthUserManagementUsersModal
       :key="showUserModal"
       :show="showUserModal"
       :selected-user="selectedUser"
       @closed="showUserModal = false"
       @reload="loadUsers()"
     />
+
     <a-modal
       v-model:visible="showUserDeleteModal"
       :closable="false"
@@ -194,6 +193,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
         </div>
       </div>
     </a-modal>
+
     <div class="flex flex-row mb-4 mx-4 justify-between pb-2">
       <div class="flex w-1/3">
         <a-input v-model:value="searchText" :placeholder="$t('placeholder.filterByEmail')">
@@ -210,6 +210,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
             <div class="text-gray-500">{{ $t('general.reload') }}</div>
           </div>
         </a-button>
+
         <a-button
           v-if="isUIAllowed('newUser')"
           v-e="['c:user:invite']"
@@ -226,6 +227,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
         </a-button>
       </div>
     </div>
+
     <div class="px-5">
       <div class="flex flex-row border-b-1 pb-2 px-2">
         <div class="flex flex-row w-4/6 space-x-1 items-center pl-1">
@@ -262,17 +264,20 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
             <template #title>
               <span>{{ $t('activity.editUser') }}</span>
             </template>
+
             <a-button type="text" class="!rounded-md nc-user-edit" @click="onEdit(user)">
               <template #icon>
                 <IcRoundEdit class="flex mx-auto h-[1rem] text-gray-500" />
               </template>
             </a-button>
           </a-tooltip>
+
           <!--          Add user to project -->
           <a-tooltip v-if="!user.project_id" placement="bottom">
             <template #title>
               <span>{{ $t('activity.addUserToProject') }}</span>
             </template>
+
             <a-button type="text" class="!rounded-md nc-user-invite" @click="inviteUser(user)">
               <template #icon>
                 <MdiPlus class="flex mx-auto h-[1.1rem] text-gray-500" />
@@ -285,6 +290,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
             <template #title>
               <span>{{ $t('activity.deleteUser') }}</span>
             </template>
+
             <a-button v-e="['c:user:delete']" type="text" class="!rounded-md nc-user-delete" @click="onDelete(user)">
               <template #icon>
                 <MdiDeleteOutline class="flex mx-auto h-[1.1rem] text-gray-500" />
@@ -300,6 +306,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
                 </div>
               </a-button>
             </div>
+
             <template #overlay>
               <a-menu>
                 <a-menu-item>
@@ -320,6 +327,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
           </a-dropdown>
         </div>
       </div>
+
       <a-pagination
         v-model:current="currentPage"
         hide-on-single-page
@@ -329,7 +337,8 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
         show-less-items
         @change="loadUsers"
       />
-      <FeedbackForm />
+
+      <LazyTabsAuthUserManagementFeedbackForm />
     </div>
   </div>
 </template>
diff --git a/packages/nc-gui/components/tabs/auth/user-management/FeedbackForm.vue b/packages/nc-gui/components/tabs/auth/user-management/FeedbackForm.vue
index 52b7b25124..e9031f4406 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/FeedbackForm.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/FeedbackForm.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import { ref, useGlobal } from '#imports'
+
 const { feedbackForm } = useGlobal()
 
 const showForm = ref(false)
 
+// todo: why this timeout?
 setTimeout(() => (showForm.value = true), 60000)
 </script>
 
diff --git a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
index 5d1713d3ed..8062be670a 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { message } from 'ant-design-vue'
-import { extractSdkResponseErrorMsg, onMounted, useCopy, useI18n, useNuxtApp, useProject } from '#imports'
+import { extractSdkResponseErrorMsg, message, onMounted, useCopy, useDashboard, useI18n, useNuxtApp, useProject } from '#imports'
 
 interface ShareBase {
   uuid?: string
@@ -143,43 +142,52 @@ onMounted(() => {
 
       <div class="text-xs">{{ $t('activity.shareBase.link') }}</div>
     </div>
+
     <div v-if="base?.uuid" class="flex flex-row mt-2 bg-red-50 py-4 mx-1 px-2 items-center rounded-sm w-full justify-between">
       <span class="flex text-xs overflow-x-hidden overflow-ellipsis text-gray-700 pl-2 nc-url">{{ url }}</span>
+
       <div class="flex border-l-1 pt-1 pl-1">
         <a-tooltip placement="bottom">
           <template #title>
             <span>{{ $t('general.reload') }}</span>
           </template>
+
           <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="recreate">
             <template #icon>
               <MdiReload class="flex mx-auto text-gray-600" />
             </template>
           </a-button>
         </a-tooltip>
+
         <a-tooltip placement="bottom">
           <template #title>
             <span>{{ $t('activity.copyUrl') }}</span>
           </template>
+
           <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="copyUrl">
             <template #icon>
               <MdiContentCopy class="flex mx-auto text-gray-600" />
             </template>
           </a-button>
         </a-tooltip>
+
         <a-tooltip placement="bottom">
           <template #title>
             <span>{{ $t('activity.openTab') }}</span>
           </template>
+
           <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="navigateToSharedBase">
             <template #icon>
               <MdiOpenInNew class="flex mx-auto text-gray-600" />
             </template>
           </a-button>
         </a-tooltip>
+
         <a-tooltip placement="bottom">
           <template #title>
             <span>{{ $t('activity.iFrame') }}</span>
           </template>
+
           <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="generateEmbeddableIframe">
             <template #icon>
               <MdiXml class="flex mx-auto text-gray-600" />
@@ -188,8 +196,10 @@ onMounted(() => {
         </a-tooltip>
       </div>
     </div>
+
     <!--    Generate publicly shareable readonly base -->
     <div class="flex text-xs text-gray-500 mt-2 justify-start ml-2">{{ $t('msg.info.generatePublicShareableReadonlyBase') }}</div>
+
     <div class="mt-4 flex flex-row justify-between mx-1">
       <a-dropdown v-model="showEditBaseDropdown" class="flex" overlay-class-name="nc-dropdown-shared-base-toggle">
         <a-button>
@@ -221,6 +231,7 @@ onMounted(() => {
             <IcRoundKeyboardArrowDown class="text-black -mt-0.5 h-[1rem]" />
           </div>
         </template>
+
         <a-select-option
           v-for="(role, index) in [ShareBaseRole.Editor, ShareBaseRole.Viewer]"
           :key="index"
diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index e2e050206d..59984d352c 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Form, message } from 'ant-design-vue'
-import ShareBase from './ShareBase.vue'
 import {
+  Form,
   computed,
   extractSdkResponseErrorMsg,
   isEmail,
+  message,
   onMounted,
   projectRoleTagColors,
   projectRoles,
@@ -36,11 +36,15 @@ const emit = defineEmits(['closed', 'reload'])
 const { t } = useI18n()
 
 const { project } = useProject()
+
 const { $api, $e } = useNuxtApp()
+
 const { copy } = useCopy()
+
 const { dashboardUrl } = $(useDashboard())
 
 const usersData = $ref<Users>({ emails: undefined, role: ProjectRole.Viewer, invitationToken: undefined })
+
 const formRef = ref()
 
 const useForm = Form.useForm
@@ -144,6 +148,7 @@ const clickInviteMore = () => {
     <div class="flex flex-col">
       <div class="flex flex-row justify-between items-center pb-1.5 mb-2 border-b-1 w-full">
         <a-typography-title class="select-none" :level="4"> {{ $t('activity.share') }}: {{ project.title }} </a-typography-title>
+
         <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="emit('closed')">
           <template #icon>
             <MaterialSymbolsCloseRounded class="flex mx-auto" />
@@ -165,6 +170,7 @@ const clickInviteMore = () => {
                   <div class="flex pl-2 text-green-700 text-xs">
                     {{ inviteUrl }}
                   </div>
+
                   <a-button type="text" class="!rounded-md -mt-0.5" @click="copyUrl">
                     <template #icon>
                       <MdiContentCopy class="flex mx-auto text-green-700 h-[1rem]" />
@@ -178,21 +184,25 @@ const clickInviteMore = () => {
               {{ $t('msg.info.userInviteNoSMTP') }}
               {{ usersData.invitationToken && usersData.emails }}
             </div>
+
             <div class="flex flex-row justify-start mt-4 ml-2">
               <a-button size="small" outlined @click="clickInviteMore">
                 <div class="flex flex-row justify-center items-center space-x-0.5">
                   <MaterialSymbolsSendOutline class="flex mx-auto text-gray-600 h-[0.8rem]" />
+
                   <div class="text-xs text-gray-600">{{ $t('activity.inviteMore') }}</div>
                 </div>
               </a-button>
             </div>
           </div>
         </template>
+
         <div v-else class="flex flex-col pb-4">
           <div class="flex flex-row items-center pl-2 pb-1 h-[1rem]">
             <MdiAccountOutline />
             <div class="text-xs ml-0.5 mt-0.5">{{ selectedUser ? $t('activity.editUser') : $t('activity.inviteTeam') }}</div>
           </div>
+
           <div class="border-1 py-3 px-4 rounded-md mt-1">
             <a-form
               ref="formRef"
@@ -210,6 +220,7 @@ const clickInviteMore = () => {
                     :rules="[{ required: true, message: 'Please input email' }]"
                   >
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('datatype.Email') }}:</div>
+
                     <a-input
                       v-model:value="usersData.emails"
                       validate-trigger="onBlur"
@@ -218,9 +229,11 @@ const clickInviteMore = () => {
                     />
                   </a-form-item>
                 </div>
+
                 <div class="flex flex-col w-1/4">
                   <a-form-item name="role" :rules="[{ required: true, message: 'Role required' }]">
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
+
                     <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role">
                       <a-select-option v-for="(role, index) in projectRoles" :key="index" :value="role" class="nc-role-option">
                         <div class="flex flex-row h-full justify-start items-center">
@@ -236,9 +249,11 @@ const clickInviteMore = () => {
                   </a-form-item>
                 </div>
               </div>
+
               <div class="flex flex-row justify-center">
                 <a-button type="primary" html-type="submit">
                   <div v-if="selectedUser">{{ $t('general.save') }}</div>
+
                   <div v-else class="flex flex-row justify-center items-center space-x-1.5">
                     <MaterialSymbolsSendOutline class="flex h-[0.8rem]" />
                     <div>{{ $t('activity.invite') }}</div>
@@ -248,12 +263,11 @@ const clickInviteMore = () => {
             </a-form>
           </div>
         </div>
+
         <div class="flex mt-4">
-          <ShareBase />
+          <LazyTabsAuthUserManagementShareBase />
         </div>
       </div>
     </div>
   </a-modal>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index f0d7dbd6c6..90f4344efe 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
-import { Empty, Form, message } from 'ant-design-vue'
 import { srcDestMappingColumns, tableColumns } from './utils'
 import {
+  Empty,
+  Form,
   MetaInj,
   ReloadViewDataHookInj,
   computed,
@@ -12,6 +13,7 @@ import {
   fieldRequiredValidator,
   getUIDTIcon,
   inject,
+  message,
   nextTick,
   onMounted,
   reactive,
@@ -22,7 +24,7 @@ import {
   useTabs,
   useTemplateRefsList,
 } from '#imports'
-import { TabType } from '~/composables'
+import { TabType } from '~/lib'
 
 const { quickImportType, projectTemplate, importData, importColumns, importOnly, maxRowsToParse } = defineProps<Props>()
 
@@ -546,6 +548,7 @@ function handleEditableTnChange(idx: number) {
           available for import
         </p>
       </a-form>
+
       <a-collapse v-if="data.tables && data.tables.length" v-model:activeKey="expansionPanel" class="template-collapse" accordion>
         <a-collapse-panel v-for="(table, tableIdx) of data.tables" :key="tableIdx">
           <template #header>
@@ -603,6 +606,7 @@ function handleEditableTnChange(idx: number) {
         </a-collapse-panel>
       </a-collapse>
     </a-card>
+
     <a-card v-else>
       <a-form :model="data" name="template-editor-form" @keydown.enter="emit('import')">
         <p v-if="data.tables && quickImportType === 'excel'" class="text-center">
diff --git a/packages/nc-gui/components/virtual-cell/BelongsTo.vue b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
index 58fc4d9f71..5e90e1b184 100644
--- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
@@ -5,10 +5,13 @@ import {
   ActiveCellInj,
   CellValueInj,
   ColumnInj,
+  IsFormInj,
+  IsLockedInj,
   ReadonlyInj,
   ReloadRowDataHookInj,
   RowInj,
-  defineAsyncComponent,
+  computed,
+  createEventHook,
   inject,
   ref,
   useProvideLTARStore,
@@ -18,10 +21,6 @@ import {
 import MdiArrowExpand from '~icons/mdi/arrow-expand'
 import MdiPlus from '~icons/mdi/plus'
 
-const ItemChip = defineAsyncComponent(() => import('./components/ItemChip.vue'))
-
-const ListItems = defineAsyncComponent(() => import('./components/ListItems.vue'))
-
 const column = inject(ColumnInj)!
 
 const reloadRowTrigger = inject(ReloadRowDataHookInj, createEventHook())
@@ -66,7 +65,7 @@ const value = computed(() => {
 
 const unlinkRef = async (rec: Record<string, any>) => {
   if (isNew.value) {
-    removeLTARRef(rec, column?.value as ColumnType)
+    await removeLTARRef(rec, column?.value as ColumnType)
   } else {
     await unlink(rec)
   }
@@ -77,9 +76,14 @@ const unlinkRef = async (rec: Record<string, any>) => {
   <div class="flex w-full chips-wrapper items-center" :class="{ active }">
     <div class="chips flex items-center flex-1">
       <template v-if="value && relatedTablePrimaryValueProp">
-        <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlinkRef(value)" />
+        <LazyVirtualCellComponentsItemChip
+          :item="value"
+          :value="value[relatedTablePrimaryValueProp]"
+          @unlink="unlinkRef(value)"
+        />
       </template>
     </div>
+
     <div
       v-if="!readOnly && !isLocked && (isUIAllowed('xcDatatableEditable') || isForm)"
       class="flex justify-end gap-1 min-h-[30px] items-center"
@@ -90,7 +94,8 @@ const unlinkRef = async (rec: Record<string, any>) => {
         @click="listItemsDlg = true"
       />
     </div>
-    <ListItems v-model="listItemsDlg" @attach-record="listItemsDlg = true" />
+
+    <LazyVirtualCellComponentsListItems v-model="listItemsDlg" @attach-record="listItemsDlg = true" />
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/virtual-cell/Count.vue b/packages/nc-gui/components/virtual-cell/Count.vue
index 3f7002bde7..468de05f6e 100644
--- a/packages/nc-gui/components/virtual-cell/Count.vue
+++ b/packages/nc-gui/components/virtual-cell/Count.vue
@@ -5,5 +5,3 @@
 <template>
   <span class="prose-sm"></span>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/packages/nc-gui/components/virtual-cell/Formula.vue b/packages/nc-gui/components/virtual-cell/Formula.vue
index fd9ea5b19f..e6192c2ec3 100644
--- a/packages/nc-gui/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui/components/virtual-cell/Formula.vue
@@ -20,7 +20,7 @@ const showEditFormulaWarningMessage = () => {
   }, 3000)
 }
 
-const result = isPg ? handleTZ(value) : value
+const result = computed(() => (isPg.value ? handleTZ(value) : value))
 
 const urls = computed(() => replaceUrlsWithLink(result.value))
 </script>
@@ -31,12 +31,15 @@ const urls = computed(() => replaceUrlsWithLink(result.value))
       <template #title>
         <span class="font-bold">{{ column.colOptions.error }}</span>
       </template>
+
       <span>ERR!</span>
     </a-tooltip>
 
     <div class="p-2" @dblclick="showEditFormulaWarningMessage">
       <div v-if="urls" v-html="urls" />
+
       <div v-else>{{ result }}</div>
+
       <div v-if="showEditFormulaWarning" class="text-left text-wrap mt-2 text-[#e65100]">
         <!-- TODO: i18n -->
         Warning: Formula fields should be configured in the field menu dropdown.
diff --git a/packages/nc-gui/components/virtual-cell/HasMany.vue b/packages/nc-gui/components/virtual-cell/HasMany.vue
index d9298241b9..c8ec639e30 100644
--- a/packages/nc-gui/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui/components/virtual-cell/HasMany.vue
@@ -10,7 +10,6 @@ import {
   ReloadRowDataHookInj,
   RowInj,
   computed,
-  defineAsyncComponent,
   inject,
   ref,
   useProvideLTARStore,
@@ -18,12 +17,6 @@ import {
   useUIPermission,
 } from '#imports'
 
-const ItemChip = defineAsyncComponent(() => import('./components/ItemChip.vue'))
-
-const ListItems = defineAsyncComponent(() => import('./components/ListItems.vue'))
-
-const ListChildItems = defineAsyncComponent(() => import('./components/ListChildItems.vue'))
-
 const column = inject(ColumnInj)!
 
 const cellValue = inject(CellValueInj)!
@@ -52,6 +45,7 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
   isNew,
   reloadRowTrigger.trigger,
 )
+
 await loadRelatedTableMeta()
 
 const localCellValue = computed<any[]>(() => {
@@ -94,17 +88,26 @@ const onAttachRecord = () => {
     <template v-if="!isForm">
       <div class="chips flex items-center img-container flex-1 hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
-          <ItemChip v-for="(cell, i) of cells" :key="i" :item="cell.item" :value="cell.value" @unlink="unlinkRef(cell.item)" />
+          <LazyVirtualCellComponentsItemChip
+            v-for="(cell, i) of cells"
+            :key="i"
+            :item="cell.item"
+            :value="cell.value"
+            @unlink="unlinkRef(cell.item)"
+          />
+
           <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">
             more...
           </span>
         </template>
       </div>
+
       <div v-if="!isLocked" class="flex justify-end gap-1 min-h-[30px] items-center">
         <MdiArrowExpand
           class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
           @click="childListDlg = true"
         />
+
         <MdiPlus
           v-if="!readOnly && isUIAllowed('xcDatatableEditable')"
           class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-plus"
@@ -113,9 +116,13 @@ const onAttachRecord = () => {
       </div>
     </template>
 
-    <ListItems v-model="listItemsDlg" />
+    <LazyVirtualCellComponentsListItems v-model="listItemsDlg" />
 
-    <ListChildItems v-model="childListDlg" :cell-value="localCellValue" @attach-record="onAttachRecord" />
+    <LazyVirtualCellComponentsListChildItems
+      v-model="childListDlg"
+      :cell-value="localCellValue"
+      @attach-record="onAttachRecord"
+    />
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index d8a01a49b6..0cb9ca580c 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -56,7 +56,7 @@ const lookupColumnMetaProps = useColumn(lookupColumn)
         <template
           v-if="lookupColumn.uidt === UITypes.LinkToAnotherRecord && lookupColumn.colOptions.type === RelationTypes.BELONGS_TO"
         >
-          <SmartsheetVirtualCell
+          <LazySmartsheetVirtualCell
             v-for="(v, i) of arrValue"
             :key="i"
             :edit-enabled="false"
@@ -65,7 +65,7 @@ const lookupColumnMetaProps = useColumn(lookupColumn)
           />
         </template>
 
-        <SmartsheetVirtualCell v-else :edit-enabled="false" :model-value="arrValue" :column="lookupColumn" />
+        <LazySmartsheetVirtualCell v-else :edit-enabled="false" :model-value="arrValue" :column="lookupColumn" />
       </div>
 
       <!-- Render normal cell -->
@@ -82,7 +82,7 @@ const lookupColumnMetaProps = useColumn(lookupColumn)
             ),
           }"
         >
-          <SmartsheetCell :model-value="v" :column="lookupColumn" :edit-enabled="false" :virtual="true" />
+          <LazySmartsheetCell :model-value="v" :column="lookupColumn" :edit-enabled="false" :virtual="true" />
         </div>
       </template>
     </template>
diff --git a/packages/nc-gui/components/virtual-cell/ManyToMany.vue b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
index 0bb553d693..10cbc79228 100644
--- a/packages/nc-gui/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
@@ -10,6 +10,7 @@ import {
   ReloadRowDataHookInj,
   RowInj,
   computed,
+  createEventHook,
   inject,
   ref,
   useProvideLTARStore,
@@ -17,12 +18,6 @@ import {
   useUIPermission,
 } from '#imports'
 
-const ItemChip = defineAsyncComponent(() => import('./components/ItemChip.vue'))
-
-const ListItems = defineAsyncComponent(() => import('./components/ListItems.vue'))
-
-const ListChildItems = defineAsyncComponent(() => import('./components/ListChildItems.vue'))
-
 const column = inject(ColumnInj)!
 
 const row = inject(RowInj)!
@@ -44,6 +39,7 @@ const childListDlg = ref(false)
 const { isUIAllowed } = useUIPermission()
 
 const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
+
 const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
@@ -93,7 +89,13 @@ const onAttachRecord = () => {
     <template v-if="!isForm">
       <div class="chips flex items-center img-container flex-1 hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
-          <ItemChip v-for="(cell, i) of cells" :key="i" :item="cell.item" :value="cell.value" @unlink="unlinkRef(cell.item)" />
+          <LazyVirtualCellComponentsItemChip
+            v-for="(cell, i) of cells"
+            :key="i"
+            :item="cell.item"
+            :value="cell.value"
+            @unlink="unlinkRef(cell.item)"
+          />
 
           <span v-if="cells?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
         </template>
@@ -113,9 +115,13 @@ const onAttachRecord = () => {
       </div>
     </template>
 
-    <ListItems v-model="listItemsDlg" />
+    <LazyVirtualCellComponentsListItems v-model="listItemsDlg" />
 
-    <ListChildItems v-model="childListDlg" :cell-value="localCellValue" @attach-record="onAttachRecord" />
+    <LazyVirtualCellComponentsListChildItems
+      v-model="childListDlg"
+      :cell-value="localCellValue"
+      @attach-record="onAttachRecord"
+    />
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
index 4cb81f0865..8a033fd790 100644
--- a/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
@@ -1,14 +1,5 @@
 <script lang="ts" setup>
-import {
-  ActiveCellInj,
-  IsFormInj,
-  ReadonlyInj,
-  defineAsyncComponent,
-  inject,
-  ref,
-  useLTARStoreOrThrow,
-  useUIPermission,
-} from '#imports'
+import { ActiveCellInj, IsFormInj, IsLockedInj, ReadonlyInj, inject, ref, useLTARStoreOrThrow, useUIPermission } from '#imports'
 
 interface Props {
   value?: string | number | boolean
@@ -19,8 +10,6 @@ const { value, item } = defineProps<Props>()
 
 const emit = defineEmits(['unlink'])
 
-const ExpandedForm: any = defineAsyncComponent(() => import('../../smartsheet/expanded-form/index.vue'))
-
 const { relatedTableMeta } = useLTARStoreOrThrow()!
 
 const { isUIAllowed } = useUIPermission()
@@ -55,7 +44,7 @@ export default {
     </div>
 
     <Suspense>
-      <ExpandedForm
+      <LazySmartsheetExpandedForm
         v-if="!readOnly && !isLocked && expandedFormDlg"
         v-model="expandedFormDlg"
         :row="{ row: item, rowMeta: {}, oldRow: { ...item } }"
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 3c0a37685f..dbb430ff01 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -1,24 +1,26 @@
 <script lang="ts" setup>
-import { Empty, Modal } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
 import {
   ColumnInj,
+  Empty,
   IsFormInj,
+  IsPublicInj,
+  Modal,
   ReadonlyInj,
   computed,
+  h,
+  inject,
+  ref,
   useLTARStoreOrThrow,
   useSmartsheetRowStoreOrThrow,
   useVModel,
   watch,
 } from '#imports'
-import { IsPublicInj } from '~/context'
 
 const props = defineProps<{ modelValue?: boolean; cellValue: any }>()
 
 const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
-const ExpandedForm: any = defineAsyncComponent(() => import('../../smartsheet/expanded-form/index.vue'))
-
 const vModel = useVModel(props, 'modelValue', emit)
 
 const isForm = inject(IsFormInj, ref(false))
@@ -54,7 +56,7 @@ watch(
 
 const unlinkRow = async (row: Record<string, any>) => {
   if (isNew.value) {
-    removeLTARRef(row, column?.value as ColumnType)
+    await removeLTARRef(row, column?.value as ColumnType)
   } else {
     await unlink(row)
     await loadChildrenList()
@@ -63,12 +65,12 @@ const unlinkRow = async (row: Record<string, any>) => {
 
 const unlinkIfNewRow = async (row: Record<string, any>) => {
   if (isNew.value) {
-    removeLTARRef(row, column?.value as ColumnType)
+    await removeLTARRef(row, column?.value as ColumnType)
   }
 }
 
 const container = computed(() =>
-  isForm?.value
+  isForm.value
     ? h('div', {
         class: 'w-full p-2',
       })
@@ -76,6 +78,7 @@ const container = computed(() =>
 )
 
 const expandedFormDlg = ref(false)
+
 const expandedFormRow = ref()
 
 /** reload children list whenever cell value changes and list is visible */
@@ -108,6 +111,7 @@ watch(
           </div>
         </a-button>
       </div>
+
       <template v-if="(isNew && state?.[column?.title]?.length) || childrenList?.pageInfo?.totalRows">
         <div class="flex-1 overflow-auto min-h-0 scrollbar-thin-dull px-12 cursor-pointer">
           <a-card
@@ -127,6 +131,7 @@ watch(
                 {{ row[relatedTablePrimaryValueProp] }}
                 <span class="text-gray-400 text-[11px] ml-1">(Primary key : {{ getRelatedTableRowId(row) }})</span>
               </div>
+
               <div v-if="!readonly" class="flex gap-2">
                 <MdiLinkVariantRemove
                   class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
@@ -163,7 +168,7 @@ watch(
     </div>
 
     <Suspense>
-      <ExpandedForm
+      <LazySmartsheetExpandedForm
         v-if="expandedFormRow && expandedFormDlg"
         v-model="expandedFormDlg"
         :row="{ row: expandedFormRow }"
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 1e720a484f..df6700cd02 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
-import { Empty } from 'ant-design-vue'
 import {
   ColumnInj,
+  Empty,
   computed,
-  defineAsyncComponent,
   inject,
   ref,
   useLTARStoreOrThrow,
@@ -19,8 +18,6 @@ const props = defineProps<{ modelValue: boolean }>()
 
 const emit = defineEmits(['update:modelValue', 'addNewRecord'])
 
-const ExpandedForm: any = defineAsyncComponent(() => import('../../smartsheet/expanded-form/index.vue'))
-
 const vModel = useVModel(props, 'modelValue', emit)
 
 const column = inject(ColumnInj)
@@ -118,14 +115,18 @@ watch(expandedFormDlg, (nexVal) => {
           :placeholder="$t('placeholder.filterQuery')"
           class="max-w-[200px]"
           size="small"
-        ></a-input>
+        />
+
         <div class="flex-1" />
+
         <MdiReload class="cursor-pointer text-gray-500 nc-reload" @click="loadChildrenExcludedList" />
+
         <!--        Add new record -->
         <a-button v-if="!isPublic" type="primary" size="small" @click="expandedFormDlg = true">
           {{ $t('activity.addNewRecord') }}
         </a-button>
       </div>
+
       <template v-if="childrenExcludedList?.pageInfo?.totalRows">
         <div class="flex-1 overflow-auto min-h-0 scrollbar-thin-dull px-12">
           <a-card
@@ -140,6 +141,7 @@ watch(expandedFormDlg, (nexVal) => {
             </span>
           </a-card>
         </div>
+
         <div class="flex justify-center mt-6">
           <a-pagination
             v-if="childrenExcludedList?.pageInfo"
@@ -152,10 +154,11 @@ watch(expandedFormDlg, (nexVal) => {
           />
         </div>
       </template>
+
       <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
 
       <Suspense>
-        <ExpandedForm
+        <LazySmartsheetExpandedForm
           v-if="expandedFormDlg"
           v-model="expandedFormDlg"
           :meta="relatedTableMeta"
diff --git a/packages/nc-gui/components/webhook/ChannelMultiSelect.vue b/packages/nc-gui/components/webhook/ChannelMultiSelect.vue
index ad2f39c92a..d9c07bc594 100644
--- a/packages/nc-gui/components/webhook/ChannelMultiSelect.vue
+++ b/packages/nc-gui/components/webhook/ChannelMultiSelect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from '@vue/runtime-core'
+import { onMounted, useVModel, watch } from '#imports'
 
 interface Props {
   modelValue: Record<string, any>[]
diff --git a/packages/nc-gui/components/webhook/Drawer.vue b/packages/nc-gui/components/webhook/Drawer.vue
index 674ef13c5e..d63b474c03 100644
--- a/packages/nc-gui/components/webhook/Drawer.vue
+++ b/packages/nc-gui/components/webhook/Drawer.vue
@@ -34,8 +34,9 @@ async function editHook(hook: Record<string, any>) {
   >
     <a-layout>
       <a-layout-content class="px-10 py-5 scrollbar-thin-primary">
-        <WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
-        <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
+        <LazyWebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
+
+        <LazyWebhookList v-else @edit="editHook" @add="editOrAdd = true" />
       </a-layout-content>
 
       <a-layout-footer class="!bg-white border-t flex">
diff --git a/packages/nc-gui/components/webhook/Editor.vue b/packages/nc-gui/components/webhook/Editor.vue
index 99372b95e7..5ac405705f 100644
--- a/packages/nc-gui/components/webhook/Editor.vue
+++ b/packages/nc-gui/components/webhook/Editor.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { Form, message } from 'ant-design-vue'
 import type { Ref } from 'vue'
 import type { AuditType } from 'nocodb-sdk'
 import {
+  Form,
   MetaInj,
   extractSdkResponseErrorMsg,
   fieldRequiredValidator,
   inject,
+  message,
+  onMounted,
   reactive,
   useApi,
   useI18n,
@@ -413,6 +415,7 @@ onMounted(async () => {
         <span class="inline text-xl font-bold">{{ meta.title }} : {{ hook.title || 'Webhooks' }} </span>
       </div>
     </div>
+
     <div>
       <a-button class="mr-3 nc-btn-webhook-test" size="large" @click="testWebhook">
         <div class="flex items-center">
@@ -421,6 +424,7 @@ onMounted(async () => {
           Test Webhook
         </div>
       </a-button>
+
       <a-button class="nc-btn-webhook-save" type="primary" size="large" @click.prevent="saveHooks">
         <div class="flex items-center">
           <MdiContentSave class="mr-2" />
@@ -430,7 +434,9 @@ onMounted(async () => {
       </a-button>
     </div>
   </div>
+
   <a-divider />
+
   <a-form :model="hook" name="create-or-edit-webhook">
     <a-form-item>
       <a-row type="flex">
@@ -445,6 +451,7 @@ onMounted(async () => {
           </a-form-item>
         </a-col>
       </a-row>
+
       <a-row type="flex" :gutter="[16, 16]">
         <a-col :span="12">
           <a-form-item v-bind="validateInfos.eventOperation">
@@ -461,6 +468,7 @@ onMounted(async () => {
             </a-select>
           </a-form-item>
         </a-col>
+
         <a-col :span="12">
           <a-form-item v-bind="validateInfos['notification.type']">
             <a-select
@@ -523,16 +531,20 @@ onMounted(async () => {
         <a-col :span="24">
           <a-tabs v-model:activeKey="urlTabKey" type="card" closeable="false" class="shadow-sm">
             <a-tab-pane key="body" tab="Body">
-              <MonacoEditor v-model="hook.notification.payload.body" :validate="false" class="min-h-60 max-h-80" />
+              <LazyMonacoEditor v-model="hook.notification.payload.body" :validate="false" class="min-h-60 max-h-80" />
             </a-tab-pane>
+
             <a-tab-pane key="params" tab="Params" force-render>
-              <ApiClientParams v-model="hook.notification.payload.parameters" />
+              <LazyApiClientParams v-model="hook.notification.payload.parameters" />
             </a-tab-pane>
+
             <a-tab-pane key="headers" tab="Headers" class="nc-tab-headers">
-              <ApiClientHeaders v-model="hook.notification.payload.headers" />
+              <LazyApiClientHeaders v-model="hook.notification.payload.headers" />
             </a-tab-pane>
+
             <a-tab-pane key="auth" tab="Auth">
-              <MonacoEditor v-model="hook.notification.payload.auth" class="min-h-60 max-h-80" />
+              <LazyMonacoEditor v-model="hook.notification.payload.auth" class="min-h-60 max-h-80" />
+
               <span class="text-gray-500 prose-sm p-2">
                 For more about auth option refer
                 <a class="prose-sm" href="https://github.com/axios/axios#request-config" target="_blank">axios docs</a>.
@@ -545,7 +557,7 @@ onMounted(async () => {
       <a-row v-if="hook.notification.type === 'Slack'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
-            <WebhookChannelMultiSelect
+            <LazyWebhookChannelMultiSelect
               v-if="slackChannels.length > 0"
               v-model="hook.notification.payload.channels"
               :selected-channel-list="hook.notification.payload.channels"
@@ -559,7 +571,7 @@ onMounted(async () => {
       <a-row v-if="hook.notification.type === 'Microsoft Teams'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
-            <WebhookChannelMultiSelect
+            <LazyWebhookChannelMultiSelect
               v-if="teamsChannels.length > 0"
               v-model="hook.notification.payload.channels"
               :selected-channel-list="hook.notification.payload.channels"
@@ -573,7 +585,7 @@ onMounted(async () => {
       <a-row v-if="hook.notification.type === 'Discord'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
-            <WebhookChannelMultiSelect
+            <LazyWebhookChannelMultiSelect
               v-if="discordChannels.length > 0"
               v-model="hook.notification.payload.channels"
               :selected-channel-list="hook.notification.payload.channels"
@@ -587,7 +599,7 @@ onMounted(async () => {
       <a-row v-if="hook.notification.type === 'Mattermost'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
-            <WebhookChannelMultiSelect
+            <LazyWebhookChannelMultiSelect
               v-if="mattermostChannels.length > 0"
               v-model="hook.notification.payload.channels"
               :selected-channel-list="hook.notification.payload.channels"
@@ -603,6 +615,7 @@ onMounted(async () => {
           <a-form-item v-if="input.type === 'LongText'" v-bind="validateInfos[`notification.payload.${input.key}`]">
             <a-textarea v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" />
           </a-form-item>
+
           <a-form-item v-else v-bind="validateInfos[`notification.payload.${input.key}`]">
             <a-input v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" />
           </a-form-item>
@@ -613,7 +626,8 @@ onMounted(async () => {
         <a-col :span="24">
           <a-card>
             <a-checkbox v-model:checked="hook.condition" class="nc-check-box-hook-condition">On Condition</a-checkbox>
-            <SmartsheetToolbarColumnFilter
+
+            <LazySmartsheetToolbarColumnFilter
               v-if="hook.condition"
               ref="filterRef"
               :auto-save="false"
@@ -644,7 +658,8 @@ onMounted(async () => {
               </a>
             </div>
           </div>
-          <WebhookTest
+
+          <LazyWebhookTest
             ref="webhookTestRef"
             :hook="{
               ...hook,
diff --git a/packages/nc-gui/components/webhook/List.vue b/packages/nc-gui/components/webhook/List.vue
index cc769d55b4..8c9900c035 100644
--- a/packages/nc-gui/components/webhook/List.vue
+++ b/packages/nc-gui/components/webhook/List.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { message } from 'ant-design-vue'
-import { MetaInj, extractSdkResponseErrorMsg, inject, onMounted, ref, useI18n, useNuxtApp } from '#imports'
+import { MetaInj, extractSdkResponseErrorMsg, inject, message, onMounted, ref, useI18n, useNuxtApp } from '#imports'
 
 const emit = defineEmits(['edit', 'add'])
 
@@ -54,6 +53,7 @@ onMounted(() => {
   <div class="">
     <div class="mb-2">
       <div class="float-left font-bold text-xl mt-2 mb-4">{{ meta.title }} : Webhooks</div>
+
       <a-button
         v-e="['c:webhook:add']"
         class="float-right nc-btn-create-webhook"
@@ -64,7 +64,9 @@ onMounted(() => {
         {{ $t('activity.addWebhook') }}
       </a-button>
     </div>
+
     <a-divider />
+
     <div v-if="hooks.length" class="">
       <a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer scrollbar-thin-primary">
         <template #renderItem="{ item, index }">
@@ -73,21 +75,25 @@ onMounted(() => {
               <template #description>
                 <span class="uppercase"> {{ item.event }} {{ item.operation }}</span>
               </template>
+
               <template #title>
                 <span class="text-xl normal-case">
                   {{ item.title }}
                 </span>
               </template>
+
               <template #avatar>
                 <div class="mt-4">
                   <MdiHook class="text-xl" />
                 </div>
               </template>
             </a-list-item-meta>
+
             <template #extra>
               <div>
                 <!-- Notify Via -->
                 <div class="mr-2">{{ $t('labels.notifyVia') }} : {{ item?.notification?.type }}</div>
+
                 <div class="float-right pt-2 pr-1">
                   <MdiDeleteOutline class="text-xl nc-hook-delete-icon" @click.stop="deleteHook(item, index)" />
                 </div>
@@ -97,6 +103,7 @@ onMounted(() => {
         </template>
       </a-list>
     </div>
+
     <div v-else class="min-h-[75vh]">
       <div class="p-4 bg-gray-100 text-gray-600">
         Webhooks list is empty, create new webhook by clicking 'Create webhook' button.
diff --git a/packages/nc-gui/components/webhook/Test.vue b/packages/nc-gui/components/webhook/Test.vue
index d9e6455d43..058e27fef6 100644
--- a/packages/nc-gui/components/webhook/Test.vue
+++ b/packages/nc-gui/components/webhook/Test.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { message } from 'ant-design-vue'
-import { MetaInj, extractSdkResponseErrorMsg, onMounted, useI18n } from '#imports'
+import { MetaInj, extractSdkResponseErrorMsg, inject, message, onMounted, ref, useI18n, useNuxtApp, watch } from '#imports'
 
 interface Props {
   hook: Record<string, any>
@@ -58,7 +57,7 @@ onMounted(async () => {
 <template>
   <a-collapse v-model:activeKey="activeKey" ghost>
     <a-collapse-panel key="1" header="Sample Payload">
-      <MonacoEditor v-model="sampleData" class="min-h-60 max-h-80" />
+      <LazyMonacoEditor v-model="sampleData" class="min-h-60 max-h-80" />
     </a-collapse-panel>
   </a-collapse>
 </template>
diff --git a/packages/nc-gui/composables/index.ts b/packages/nc-gui/composables/index.ts
deleted file mode 100644
index 8f49f15ea0..0000000000
--- a/packages/nc-gui/composables/index.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export * from './useApi'
-export * from './useDialog'
-export * from './useGlobal'
-export * from './useInjectionState'
-export * from './useRoles'
-export * from './useSidebar'
-export * from './useTheme'
-export * from './useUIPermission'
-export * from './useColors'
-export * from './useColumn'
-export * from './useGridViewColumnWidth'
-export * from './useMetas'
-export * from './useProject'
-export * from './useTable'
-export * from './useTabs'
-export * from './useViewColumns'
-export * from './useViewData'
-export * from './useViewFilters'
-export * from './useViews'
-export * from './useViewSorts'
-export * from './useVirtualCell'
-export * from './useColumnCreateStore'
-export * from './useSmartsheetStore'
-export * from './useLTARStore'
-export * from './useExpandedFormStore'
-export * from './useSharedFormViewStore'
-export * from './useCellUrlConfig'
-export * from './useCopy'
diff --git a/packages/nc-gui/composables/useApi/index.ts b/packages/nc-gui/composables/useApi/index.ts
index 6818ea721a..dd2e8399e9 100644
--- a/packages/nc-gui/composables/useApi/index.ts
+++ b/packages/nc-gui/composables/useApi/index.ts
@@ -3,8 +3,7 @@ import { Api } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import type { CreateApiOptions, UseApiProps, UseApiReturn } from './types'
 import { addAxiosInterceptors } from './interceptors'
-import { BASE_URL } from '~/lib'
-import { createEventHook, extractSdkResponseErrorMsg, ref, unref, useCounter, useGlobal, useNuxtApp } from '#imports'
+import { BASE_URL, createEventHook, extractSdkResponseErrorMsg, ref, unref, useCounter, useGlobal, useNuxtApp } from '#imports'
 
 export function createApiInstance<SecurityDataType = any>({ baseURL = BASE_URL }: CreateApiOptions = {}): Api<SecurityDataType> {
   const { appInfo } = $(useGlobal())
diff --git a/packages/nc-gui/composables/useColors.ts b/packages/nc-gui/composables/useColors.ts
index d2fd78b9ed..937b8e07b9 100644
--- a/packages/nc-gui/composables/useColors.ts
+++ b/packages/nc-gui/composables/useColors.ts
@@ -1,7 +1,5 @@
 import type { MaybeRef } from '@vueuse/core'
-import { computed, effectScope, tryOnScopeDispose, unref, watch, watchEffect } from '#build/imports'
-import { useNuxtApp } from '#app'
-import { theme } from '~/utils'
+import { computed, effectScope, theme, tryOnScopeDispose, unref, useNuxtApp, watch, watchEffect } from '#imports'
 
 export function useColors(darkMode?: MaybeRef<boolean>) {
   const scope = effectScope()
diff --git a/packages/nc-gui/composables/useColumn.ts b/packages/nc-gui/composables/useColumn.ts
index 9fc00ffa5b..93710c3f77 100644
--- a/packages/nc-gui/composables/useColumn.ts
+++ b/packages/nc-gui/composables/useColumn.ts
@@ -1,22 +1,23 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
-import { useProject } from '#imports'
+import { computed, useProject } from '#imports'
 
-export function useColumn(column: Ref<ColumnType>) {
+export function useColumn(column: Ref<ColumnType | undefined>) {
   const { project } = useProject()
 
-  const uiDatatype: ComputedRef<UITypes> = computed(() => column?.value?.uidt as UITypes)
+  const uiDatatype: ComputedRef<UITypes> = computed(() => column.value?.uidt as UITypes)
+
   const abstractType = computed(() => {
     // kludge: CY test hack; column.value is being received NULL during attach cell delete operation
-    return isVirtualCol(column?.value) || !column?.value
+    return (column.value && isVirtualCol(column.value)) || !column.value
       ? null
       : SqlUiFactory.create(
           project.value?.bases?.[0]?.type ? { client: project.value.bases[0].type } : { client: 'mysql2' },
-        ).getAbstractType(column?.value)
+        ).getAbstractType(column.value)
   })
 
-  const dataTypeLow = computed(() => column?.value?.dt?.toLowerCase())
+  const dataTypeLow = computed(() => column.value?.dt?.toLowerCase())
   const isBoolean = computed(() => abstractType.value === 'boolean')
   const isString = computed(() => uiDatatype.value === UITypes.SingleLineText || abstractType.value === 'string')
   const isTextArea = computed(() => uiDatatype.value === UITypes.LongText)
@@ -60,9 +61,7 @@ export function useColumn(column: Ref<ColumnType>) {
   const isManualSaved = computed(() =>
     [UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(uiDatatype.value),
   )
-  const isPrimary = computed(() => {
-    return column?.value?.pv
-  })
+  const isPrimary = computed(() => column.value?.pv)
 
   return {
     abstractType,
diff --git a/packages/nc-gui/composables/useColumnCreateStore.ts b/packages/nc-gui/composables/useColumnCreateStore.ts
index 4f287356a5..addb21c1d5 100644
--- a/packages/nc-gui/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui/composables/useColumnCreateStore.ts
@@ -1,10 +1,20 @@
 import clone from 'just-clone'
-import { Form, message } from 'ant-design-vue'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { computed, createInjectionState, extractSdkResponseErrorMsg, useNuxtApp } from '#imports'
+import {
+  Form,
+  computed,
+  createInjectionState,
+  extractSdkResponseErrorMsg,
+  message,
+  ref,
+  useI18n,
+  useMetas,
+  useNuxtApp,
+  useProject,
+  watch,
+} from '#imports'
 
 const useForm = Form.useForm
 
@@ -13,9 +23,13 @@ const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
   (meta: Ref<TableType | undefined>, column: Ref<ColumnType | undefined>) => {
     const { sqlUi } = useProject()
+
     const { $api } = useNuxtApp()
+
     const { getMeta } = useMetas()
+
     const { t } = useI18n()
+
     const { $e } = useNuxtApp()
 
     const isEdit = computed(() => !!column.value?.id)
@@ -239,6 +253,8 @@ export { useProvideColumnCreateStore }
 
 export function useColumnCreateStoreOrThrow() {
   const columnCreateStore = useColumnCreateStore()
+
   if (columnCreateStore == null) throw new Error('Please call `useProvideColumnCreateStore` on the appropriate parent component')
+
   return columnCreateStore
 }
diff --git a/packages/nc-gui/composables/useCopy.ts b/packages/nc-gui/composables/useCopy.ts
index 643fa46b1c..10307d43af 100644
--- a/packages/nc-gui/composables/useCopy.ts
+++ b/packages/nc-gui/composables/useCopy.ts
@@ -15,7 +15,7 @@ export const useCopy = () => {
   const { copy: _copy, isSupported } = useClipboard()
 
   const copy = async (text: string) => {
-    if (isSupported) {
+    if (isSupported.value) {
       await _copy(text)
     } else {
       copyFallback(text)
diff --git a/packages/nc-gui/composables/useDashboard.ts b/packages/nc-gui/composables/useDashboard.ts
index e9a93e0c70..34eef3a735 100644
--- a/packages/nc-gui/composables/useDashboard.ts
+++ b/packages/nc-gui/composables/useDashboard.ts
@@ -1,5 +1,8 @@
+import { computed, useRoute } from '#imports'
+
 export function useDashboard() {
   const route = useRoute()
+
   const dashboardUrl = computed(() => {
     // todo: test in different scenarios
     // get base path of app
diff --git a/packages/nc-gui/composables/useDialog/index.ts b/packages/nc-gui/composables/useDialog/index.ts
index 79bb2e69ef..a8e7669fbe 100644
--- a/packages/nc-gui/composables/useDialog/index.ts
+++ b/packages/nc-gui/composables/useDialog/index.ts
@@ -36,7 +36,7 @@ import { createEventHook, h, ref, toReactive, tryOnScopeDispose, useNuxtApp, wat
  * }
  */
 export function useDialog(
-  componentOrVNode: DefineComponent<any, any, any> | VNode,
+  componentOrVNode: any,
   props: NonNullable<Parameters<typeof h>[1]> = {},
   mountTarget?: Element | ComponentPublicInstance,
 ) {
diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts
index 274d31dd32..ed9b1e7a9e 100644
--- a/packages/nc-gui/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui/composables/useExpandedFormStore.ts
@@ -1,50 +1,61 @@
 import { UITypes } from 'nocodb-sdk'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { message } from 'ant-design-vue'
 import dayjs from 'dayjs'
-import { useI18n } from 'vue-i18n'
 import {
   NOCO,
+  computed,
   extractPkFromRow,
   extractSdkResponseErrorMsg,
   getHTMLEncodedText,
+  message,
+  ref,
   useApi,
+  useI18n,
   useInjectionState,
   useNuxtApp,
   useProject,
   useProvideSmartsheetRowStore,
+  useSharedView,
 } from '#imports'
-import type { Row } from '~/composables'
+import type { Row } from '~/lib'
 
 const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
   const { $e, $state, $api } = useNuxtApp()
+
   const { api, isLoading: isCommentsLoading, error: commentsError } = useApi()
+
   const { t } = useI18n()
 
   const commentsOnly = ref(false)
+
   const commentsAndLogs = ref<any[]>([])
+
   const comment = ref('')
+
   const commentsDrawer = ref(false)
+
   const changedColumns = ref(new Set<string>())
+
   const { project } = useProject()
-  const rowStore = useProvideSmartsheetRowStore(meta, row)
-  const { sharedView } = useSharedView() as Record<string, any>
 
-  // todo
-  // const activeView = inject(ActiveViewInj)
+  const rowStore = useProvideSmartsheetRowStore(meta, row)
 
-  // const { updateOrSaveRow, insertRow } = useViewData(meta, activeView as any)
+  const { sharedView } = useSharedView()
 
   // getters
   const primaryValue = computed(() => {
     if (row?.value?.row) {
       const col = meta?.value?.columns?.find((c) => c.pv)
+
       if (!col) {
         return
       }
+
       const value = row.value.row?.[col.title as string]
+
       const uidt = col.uidt
+
       if (uidt === UITypes.Date) {
         return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD')
       } else if (uidt === UITypes.DateTime) {
@@ -73,8 +84,11 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   // actions
   const loadCommentsAndLogs = async () => {
     if (!row.value) return
+
     const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
+
     if (!rowId) return
+
     commentsAndLogs.value =
       (
         await api.utils.commentList({
@@ -92,7 +106,9 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   const saveComment = async () => {
     try {
       if (!row.value || !comment.value) return
+
       const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
+
       if (!rowId) return
 
       await api.utils.commentRow({
@@ -114,14 +130,6 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   const save = async () => {
     let data
     try {
-      // todo:
-      // if (this.presetValues) {
-      //   // cater presetValues
-      //   for (const k in this.presetValues) {
-      //     this.$set(this.changedColumns, k, true);
-      //   }
-      // }
-
       const updateOrInsertObj = [...changedColumns.value].reduce((obj, col) => {
         obj[col] = row.value.row[col]
         return obj
@@ -141,7 +149,9 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
         if (!id) {
           return message.info("Update not allowed for table which doesn't have primary Key")
         }
+
         await $api.dbTableRow.update(NOCO, project.value.title as string, meta.value.title, id, updateOrInsertObj)
+
         for (const key of Object.keys(updateOrInsertObj)) {
           // audit
           $api.utils
@@ -164,11 +174,6 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
         return message.info(t('msg.info.noColumnsToUpdate'))
       }
 
-      // this.$emit('update:oldRow', { ...this.localState });
-      // this.changedColumns = {};
-      // this.$emit('input', this.localState);
-      // this.$emit('update:isNew', false);
-
       message.success(`${primaryValue.value || 'Row'} updated successfully.`)
 
       changedColumns.value = new Set()
@@ -182,7 +187,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   const loadRow = async (rowId?: string) => {
     const record = await $api.dbTableRow.read(
       NOCO,
-      (project?.value?.id || sharedView.value.view.project_id) as string,
+      // todo: project_id missing on view type
+      (project?.value?.id || (sharedView.value?.view as any)?.project_id) as string,
       meta.value.title,
       rowId ?? extractPkFromRow(row.value.row, meta.value.columns as ColumnType[]),
     )
@@ -218,6 +224,8 @@ export { useProvideExpandedFormStore }
 
 export function useExpandedFormStoreOrThrow() {
   const expandedFormStore = useExpandedFormStore()
+
   if (expandedFormStore == null) throw new Error('Please call `useExpandedFormStore` on the appropriate parent component')
+
   return expandedFormStore
 }
diff --git a/packages/nc-gui/composables/useGlobal/actions.ts b/packages/nc-gui/composables/useGlobal/actions.ts
index cadedac39a..0e1e265de2 100644
--- a/packages/nc-gui/composables/useGlobal/actions.ts
+++ b/packages/nc-gui/composables/useGlobal/actions.ts
@@ -1,14 +1,7 @@
-import { message } from 'ant-design-vue'
-import { Api } from 'nocodb-sdk'
 import type { Actions, State } from './types'
-import { getI18n } from '~/plugins/a.i18n'
+import { message, useNuxtApp } from '#imports'
 
 export function useGlobalActions(state: State): Actions {
-  /** detached api instance, will not trigger global loading */
-  const api = new Api()
-
-  const { t } = getI18n().global
-
   /** Sign out by deleting the token from localStorage */
   const signOut: Actions['signOut'] = () => {
     state.token.value = null
@@ -32,7 +25,10 @@ export function useGlobalActions(state: State): Actions {
 
   /** manually try to refresh token */
   const refreshToken = async () => {
-    api.instance
+    const nuxtApp = useNuxtApp()
+    const t = nuxtApp.vueApp.i18n.global.t
+
+    nuxtApp.$api.instance
       .post('/auth/refresh-token', null, {
         withCredentials: true,
       })
diff --git a/packages/nc-gui/composables/useGlobal/state.ts b/packages/nc-gui/composables/useGlobal/state.ts
index 09181dbf07..ab8b01c173 100644
--- a/packages/nc-gui/composables/useGlobal/state.ts
+++ b/packages/nc-gui/composables/useGlobal/state.ts
@@ -1,9 +1,7 @@
-import { usePreferredLanguages, useStorage } from '@vueuse/core'
-import { useJwt } from '@vueuse/integrations/useJwt'
+import { useStorage } from '@vueuse/core'
 import type { JwtPayload } from 'jwt-decode'
 import type { AppInfo, State, StoredState } from './types'
-import { BASE_URL } from '~/lib'
-import { computed, ref, toRefs, useCounter, useNuxtApp, useTimestamp } from '#imports'
+import { BASE_URL, computed, ref, toRefs, useCounter, useJwt, useNuxtApp, usePreferredLanguages, useTimestamp } from '#imports'
 import type { Language, User } from '~/lib'
 
 export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
diff --git a/packages/nc-gui/composables/useGridViewColumnWidth.ts b/packages/nc-gui/composables/useGridViewColumnWidth.ts
index 1d67613cfa..b73f58bf12 100644
--- a/packages/nc-gui/composables/useGridViewColumnWidth.ts
+++ b/packages/nc-gui/composables/useGridViewColumnWidth.ts
@@ -1,14 +1,14 @@
-import { useStyleTag } from '@vueuse/core'
 import type { ColumnType, GridColumnType, GridType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { useMetas } from './useMetas'
-import { useUIPermission } from './useUIPermission'
-import { IsPublicInj } from '~/context'
+import { IsPublicInj, computed, inject, ref, useMetas, useNuxtApp, useStyleTag, useUIPermission, watch } from '#imports'
 
 export function useGridViewColumnWidth(view: Ref<GridType | undefined>) {
   const { css, load: loadCss, unload: unloadCss } = useStyleTag('')
+
   const { isUIAllowed } = useUIPermission()
+
   const { $api } = useNuxtApp()
+
   const { metas } = useMetas()
 
   const gridViewCols = ref<Record<string, GridColumnType>>({})
@@ -53,14 +53,14 @@ export function useGridViewColumnWidth(view: Ref<GridType | undefined>) {
   /** when columns changes(create/delete) reload grid columns */
   watch(columns, loadGridViewColumns)
 
-  const updateWidth = (id: string, width: string) => {
+  const updateWidth = async (id: string, width: string) => {
     if (gridViewCols?.value?.[id]) {
       gridViewCols.value[id].width = width
     }
 
     // sync with server if allowed
     if (!isPublic.value && isUIAllowed('gridColUpdate') && gridViewCols.value[id]?.id) {
-      $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, {
+      await $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, {
         width,
       })
     }
diff --git a/packages/nc-gui/composables/useLTARStore.ts b/packages/nc-gui/composables/useLTARStore.ts
index d0f235533a..7feb9e85f5 100644
--- a/packages/nc-gui/composables/useLTARStore.ts
+++ b/packages/nc-gui/composables/useLTARStore.ts
@@ -1,21 +1,25 @@
 import type { ColumnType, LinkToAnotherRecordType, PaginatedType, RequestParams, TableType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
-import { Modal, message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
 import {
   IsPublicInj,
+  Modal,
   NOCO,
+  SharedViewPasswordInj,
   computed,
   extractSdkResponseErrorMsg,
+  inject,
+  message,
   reactive,
   ref,
+  useI18n,
   useInjectionState,
   useMetas,
   useNuxtApp,
   useProject,
+  useSharedView,
+  watch,
 } from '#imports'
-import type { Row } from '~/composables'
-import { SharedViewPasswordInj } from '~/context'
+import type { Row } from '~/lib'
 
 interface DataApiResponse {
   list: Record<string, any>
@@ -27,29 +31,37 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
   (column: Ref<Required<ColumnType>>, row: Ref<Row>, isNewRow: ComputedRef<boolean> | Ref<boolean>, reloadData = () => {}) => {
     // state
     const { metas, getMeta } = useMetas()
+
     const { project } = useProject()
+
     const { $api } = useNuxtApp()
+
     const sharedViewPassword = inject(SharedViewPasswordInj, ref(null))
+
     const childrenExcludedList = ref<DataApiResponse | undefined>()
     const childrenList = ref<DataApiResponse | undefined>()
+
     const childrenExcludedListPagination = reactive({
       page: 1,
       query: '',
       size: 10,
     })
+
     const childrenListPagination = reactive({
       page: 1,
       query: '',
       size: 10,
     })
+
     const { t } = useI18n()
 
     const isPublic: boolean = $(inject(IsPublicInj, ref(false)))
 
     const colOptions = $computed(() => column.value?.colOptions as LinkToAnotherRecordType)
 
-    const { sharedView } = useSharedView() as Record<string, any>
-    const projectId = project.value?.id || sharedView.value?.view?.project_id
+    const { sharedView } = useSharedView()
+
+    const projectId = project.value?.id || (sharedView.value?.view as any)?.project_id
 
     // getters
     const meta = computed(() => metas?.value?.[column?.value?.fk_model_id as string])
@@ -168,7 +180,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
         } else {
           childrenList.value = await $api.dbTableRow.nestedList(
             NOCO,
-            (project?.value?.id || sharedView?.value?.view?.project_id) as string,
+            (project?.value?.id || (sharedView.value?.view as any)?.project_id) as string,
             meta.value.id,
             rowId.value,
             colOptions.type as 'mm' | 'hm',
@@ -251,12 +263,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       } catch (e: any) {
         message.error(`${t('msg.error.unlinkFailed')}: ${await extractSdkResponseErrorMsg(e)}`)
       }
+
       reloadData?.()
-      // todo: reload table data and children list
-      // this.$emit('loadTableData');
-      // if (this.isForm && this.$refs.childList) {
-      //   this.$refs.childList.loadData();
-      // }
     }
 
     const link = async (row: Record<string, any>) => {
@@ -288,16 +296,6 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
         message.error(`Linking failed: ${await extractSdkResponseErrorMsg(e)}`)
       }
 
-      // todo: reload table data and child list
-      // this.pid = pid;
-      //
-      // this.newRecordModal = false;
-      //
-      // this.$emit('loadTableData');
-      // if (this.isForm && this.$refs.childList) {
-      //   this.$refs.childList.loadData();
-      // }
-
       reloadData?.()
     }
 
@@ -305,6 +303,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     watch(childrenExcludedListPagination, async () => {
       await loadChildrenExcludedList()
     })
+
     watch(childrenListPagination, async () => {
       await loadChildrenList()
     })
diff --git a/packages/nc-gui/composables/useMetas.ts b/packages/nc-gui/composables/useMetas.ts
index 8f3aa68203..464891a56c 100644
--- a/packages/nc-gui/composables/useMetas.ts
+++ b/packages/nc-gui/composables/useMetas.ts
@@ -1,12 +1,11 @@
 import { message } from 'ant-design-vue'
 import type { WatchStopHandle } from 'vue'
 import type { TableInfoType, TableType } from 'nocodb-sdk'
-import { useProject } from './useProject'
-import { extractSdkResponseErrorMsg } from '~/utils'
-import { useNuxtApp, useState } from '#app'
+import { extractSdkResponseErrorMsg, useNuxtApp, useProject, useState, watch } from '#imports'
 
 export function useMetas() {
   const { $api } = useNuxtApp()
+
   const { tables } = useProject()
 
   const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({}))
@@ -26,6 +25,7 @@ export function useMetas() {
     }
   }
 
+  // todo: this needs a proper refactor, arbitrary waiting times are usually not a good idea
   const getMeta = async (tableIdOrTitle: string, force = false): Promise<TableType | TableInfoType | null> => {
     if (!tableIdOrTitle) return null
     /** wait until loading is finished if requesting same meta */
@@ -53,11 +53,14 @@ export function useMetas() {
           { immediate: true },
         )
       })
+
       if (metas.value[tableIdOrTitle]) {
         return metas.value[tableIdOrTitle]
       }
     }
+
     loadingState.value[tableIdOrTitle] = true
+
     try {
       if (!force && metas.value[tableIdOrTitle]) {
         return metas.value[tableIdOrTitle]
@@ -89,8 +92,10 @@ export function useMetas() {
   const clearAllMeta = () => {
     metas.value = {}
   }
+
   const removeMeta = (idOrTitle: string) => {
     const meta = metas.value[idOrTitle]
+
     if (meta) {
       delete metas.value[meta.id]
       delete metas.value[meta.title]
diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index 050c20be52..13892b7397 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -15,8 +15,7 @@ import {
   useTheme,
   watch,
 } from '#imports'
-import type { ProjectMetaInfo } from '~/lib'
-import type { ThemeConfig } from '@/composables/useTheme'
+import type { ProjectMetaInfo, ThemeConfig } from '~/lib'
 
 const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
   const { $e } = useNuxtApp()
@@ -87,6 +86,7 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     } else if (projectType === 'base') {
       try {
         const baseData = await api.public.sharedBaseGet(route.params.projectId as string)
+
         project.value = await api.project.read(baseData.project_id!)
       } catch (e: any) {
         if (e?.response?.status === 404) {
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index a64b2365d0..01272e43eb 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -1,13 +1,13 @@
 import useVuelidate from '@vuelidate/core'
 import { minLength, required } from '@vuelidate/validators'
 import type { Ref } from 'vue'
-import { message } from 'ant-design-vue'
 import type { ColumnType, FormType, LinkToAnotherRecordType, TableType, ViewType } from 'nocodb-sdk'
 import { ErrorMessages, RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import {
   SharedViewPasswordInj,
   computed,
   extractSdkResponseErrorMsg,
+  message,
   provide,
   ref,
   useApi,
diff --git a/packages/nc-gui/composables/useSharedView.ts b/packages/nc-gui/composables/useSharedView.ts
index 0d1163fdae..2ef25903ca 100644
--- a/packages/nc-gui/composables/useSharedView.ts
+++ b/packages/nc-gui/composables/useSharedView.ts
@@ -1,19 +1,27 @@
 import type { ExportTypes, FilterType, PaginatedType, RequestParams, SortType, TableType, ViewType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
-import { useGlobal, useNuxtApp } from '#imports'
+import { computed, useGlobal, useMetas, useNuxtApp, useState } from '#imports'
 
 export function useSharedView() {
   const nestedFilters = useState<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>(
     'nestedFilters',
     () => [],
   )
+
   const { appInfo } = $(useGlobal())
+
   const appInfoDefaultLimit = appInfo.defaultLimit || 25
+
   const paginationData = useState<PaginatedType>('paginationData', () => ({ page: 1, pageSize: appInfoDefaultLimit }))
+
   const sharedView = useState<ViewType | undefined>('sharedView', () => undefined)
+
   const sorts = useState<SortType[]>('sorts', () => [])
+
   const password = useState<string | undefined>('password', () => undefined)
+
   const allowCSVDownload = useState<boolean>('allowCSVDownload', () => false)
+
   const meta = useState<TableType | undefined>('meta', () => undefined)
 
   const formColumns = computed(
@@ -28,6 +36,7 @@ export function useSharedView() {
   )
 
   const { $api } = useNuxtApp()
+
   const { setMeta } = useMetas()
 
   const loadSharedView = async (viewId: string, localPassword: string | undefined = undefined) => {
@@ -49,7 +58,7 @@ export function useSharedView() {
       .map((c) => ({ ...c, order: order++ }))
       .sort((a, b) => a.order - b.order)
 
-    setMeta(viewMeta.model)
+    await setMeta(viewMeta.model)
 
     const relatedMetas = { ...viewMeta.relatedMetas }
     Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key]))
diff --git a/packages/nc-gui/composables/useSidebar/index.ts b/packages/nc-gui/composables/useSidebar/index.ts
index 344dc90f3e..260e5f02dd 100644
--- a/packages/nc-gui/composables/useSidebar/index.ts
+++ b/packages/nc-gui/composables/useSidebar/index.ts
@@ -1,5 +1,5 @@
 import { useStorage } from '@vueuse/core'
-import { MemStorage, onScopeDispose, ref, syncRef, toRefs, watch } from '#imports'
+import { createSharedComposable, ref, syncRef, toRefs, watch } from '#imports'
 
 interface UseSidebarProps {
   hasSidebar?: boolean
@@ -13,10 +13,9 @@ interface UseSidebarProps {
  * Requires an id to work, id should correspond to the sidebar state you want to create or fetch
  * If `useSidebar` was not called before it will create a new state if no state can be found for the specified id
  */
-const sidebarStorage = new MemStorage()
-
 const createSidebar = (id: string, props: UseSidebarProps = {}) => {
   const isOpen = ref(props.isOpen ?? false)
+
   const hasSidebar = ref(props.hasSidebar ?? true)
 
   function toggle(state?: boolean) {
@@ -57,25 +56,19 @@ const createSidebar = (id: string, props: UseSidebarProps = {}) => {
   }
 }
 
-export function useSidebar(id: string, props: UseSidebarProps = {}) {
-  if (!id) throw new Error('useSidebar requires an id')
+const leftSidebar = createSharedComposable(() => createSidebar('leftSidebar'))
 
-  if (!sidebarStorage.has(id)) {
-    const sidebar = createSidebar(id, props)
+const rightSidebar = createSharedComposable(() => createSidebar('rightSidebar', { useStorage: true }))
 
-    sidebarStorage.set(id, sidebar)
+export const useSidebar = (id: string, props: UseSidebarProps = {}) => {
+  const sidebar = id.includes('left') ? leftSidebar() : rightSidebar()
 
-    onScopeDispose(() => {
-      sidebarStorage.remove(id)
-    })
+  if (props.isOpen !== undefined) sidebar.isOpen.value = props.isOpen
+  if (props.hasSidebar !== undefined) sidebar.hasSidebar.value = props.hasSidebar
 
-    return sidebar
-  } else {
-    const sidebar = sidebarStorage.get(id)
+  return sidebar
+}
 
-    if (props.isOpen !== undefined) sidebar.isOpen.value = props.isOpen
-    if (props.hasSidebar !== undefined) sidebar.hasSidebar.value = props.hasSidebar
+export const useLeftSidebar = (props: UseSidebarProps = {}) => useSidebar('left', props)
 
-    return sidebar
-  }
-}
+export const useRightSidebar = (props: UseSidebarProps = {}) => useSidebar('right', props)
diff --git a/packages/nc-gui/composables/useSmartsheetRowStore.ts b/packages/nc-gui/composables/useSmartsheetRowStore.ts
index ef0b633cde..e80b0f34b5 100644
--- a/packages/nc-gui/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetRowStore.ts
@@ -1,24 +1,24 @@
-import { message } from 'ant-design-vue'
 import { UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType, RelationTypes, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
-import { useI18n } from 'vue-i18n'
-import type { Row } from './useViewData'
 import {
   NOCO,
   computed,
   deepCompare,
   extractPkFromRow,
   extractSdkResponseErrorMsg,
+  message,
   ref,
   unref,
+  useI18n,
   useInjectionState,
   useMetas,
   useNuxtApp,
   useProject,
   useVirtualCell,
 } from '#imports'
+import type { Row } from '~/lib'
 
 const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
   (meta: Ref<TableType | undefined>, row: MaybeRef<Row>) => {
diff --git a/packages/nc-gui/composables/useSmartsheetStore.ts b/packages/nc-gui/composables/useSmartsheetStore.ts
index 2ea1ad1f26..05140b2ed2 100644
--- a/packages/nc-gui/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetStore.ts
@@ -1,7 +1,7 @@
 import { ViewTypes } from 'nocodb-sdk'
 import type { FilterType, SortType, TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { computed, reactive, useInjectionState, useNuxtApp, useProject, useTemplateRefsList } from '#imports'
+import { computed, reactive, ref, unref, useInjectionState, useNuxtApp, useProject, useTemplateRefsList } from '#imports'
 
 const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
   (
@@ -12,6 +12,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
     initialFilters?: Ref<FilterType[]>,
   ) => {
     const { $api } = useNuxtApp()
+
     const { sqlUi } = useProject()
 
     const cellRefs = useTemplateRefsList<HTMLTableDataCellElement>()
@@ -46,8 +47,8 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
 
     const isSqlView = computed(() => meta.value?.type === 'view')
 
-    const sorts = initalSorts ?? ref<SortType[]>([])
-    const nestedFilters: Ref<FilterType[]> = initialFilters ?? ref<FilterType[]>([])
+    const sorts = ref<SortType[]>(unref(initalSorts) ?? [])
+    const nestedFilters = ref<FilterType[]>(unref(initialFilters) ?? [])
 
     return {
       view,
@@ -74,6 +75,8 @@ export { useProvideSmartsheetStore }
 
 export function useSmartsheetStoreOrThrow() {
   const smartsheetStore = useSmartsheetStore()
+
   if (smartsheetStore == null) throw new Error('Please call `useSmartsheetStore` on the appropriate parent component')
+
   return smartsheetStore
 }
diff --git a/packages/nc-gui/composables/useTable.ts b/packages/nc-gui/composables/useTable.ts
index 78278db519..a1799bc4dd 100644
--- a/packages/nc-gui/composables/useTable.ts
+++ b/packages/nc-gui/composables/useTable.ts
@@ -1,10 +1,20 @@
-import { Modal, message } from 'ant-design-vue'
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
-import { useI18n } from 'vue-i18n'
-import { useNuxtApp } from '#app'
-import { TabType } from '~/composables/useTabs'
-import { SYSTEM_COLUMNS, extractSdkResponseErrorMsg, useProject } from '#imports'
+import {
+  Modal,
+  SYSTEM_COLUMNS,
+  extractSdkResponseErrorMsg,
+  generateUniqueTitle as generateTitle,
+  message,
+  reactive,
+  useI18n,
+  useMetas,
+  useNuxtApp,
+  useProject,
+  useTabs,
+  watch,
+} from '#imports'
+import { TabType } from '~/lib'
 
 export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
   const table = reactive<{ title: string; table_name: string; columns: string[] }>({
@@ -12,11 +22,17 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
     table_name: '',
     columns: SYSTEM_COLUMNS,
   })
+
   const { t } = useI18n()
+
   const { $e, $api } = useNuxtApp()
+
   const { getMeta, removeMeta } = useMetas()
+
   const { loadTables } = useProject()
+
   const { closeTab } = useTabs()
+
   const { sqlUi, project, tables } = useProject()
 
   const createTable = async () => {
@@ -51,11 +67,7 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
   )
 
   const generateUniqueTitle = () => {
-    let c = 1
-    while (tables?.value?.some((t) => t.title === `Sheet${c}`)) {
-      c++
-    }
-    table.title = `Sheet${c}`
+    table.title = generateTitle('Sheet', tables.value, 'title')
   }
 
   const deleteTable = (table: TableType) => {
diff --git a/packages/nc-gui/composables/useTabs.ts b/packages/nc-gui/composables/useTabs.ts
index 43f64ad02d..2cd8a46b31 100644
--- a/packages/nc-gui/composables/useTabs.ts
+++ b/packages/nc-gui/composables/useTabs.ts
@@ -1,19 +1,7 @@
 import type { WritableComputedRef } from '@vue/reactivity'
-import { navigateTo, useProject, useRoute, useState } from '#imports'
-
-export enum TabType {
-  TABLE = 'table',
-  VIEW = 'view',
-  AUTH = 'auth',
-}
-
-export interface TabItem {
-  type: TabType
-  title: string
-  id?: string
-  viewTitle?: string
-  viewId?: string
-}
+import { computed, navigateTo, useProject, useRoute, useRouter, useState } from '#imports'
+import type { TabItem } from '~/lib'
+import { TabType } from '~/lib'
 
 function getPredicate(key: Partial<TabItem>) {
   return (tab: TabItem) =>
@@ -26,7 +14,9 @@ export function useTabs() {
   const tabs = useState<TabItem[]>('tabs', () => [])
 
   const route = useRoute()
+
   const router = useRouter()
+
   const { tables } = useProject()
 
   const projectType = $computed(() => route.params.projectType as string)
@@ -120,7 +110,9 @@ export function useTabs() {
     const tab = typeof key === 'number' ? tabs.value[key] : tabs.value.find(getPredicate(key))
     if (tab) {
       const isActive = tabs.value.indexOf(tab) === activeTabIndex.value
+
       Object.assign(tab, newTabItemProps)
+
       if (isActive && tab.title)
         router.replace({
           params: {
diff --git a/packages/nc-gui/composables/useTheme/index.ts b/packages/nc-gui/composables/useTheme/index.ts
index f0b4eb0220..69086fb94b 100644
--- a/packages/nc-gui/composables/useTheme/index.ts
+++ b/packages/nc-gui/composables/useTheme/index.ts
@@ -1,12 +1,7 @@
 import { ConfigProvider } from 'ant-design-vue'
-import type { Theme as AntTheme } from 'ant-design-vue/es/config-provider'
 import tinycolor from 'tinycolor2'
 import { createGlobalState, hexToRGB, ref, themeV2Colors, useCssVar } from '#imports'
-
-export interface ThemeConfig extends AntTheme {
-  primaryColor: string
-  accentColor: string
-}
+import type { ThemeConfig } from '~/lib'
 
 export const useTheme = createGlobalState((config?: Partial<ThemeConfig>) => {
   const primaryColor = useCssVar('--color-primary', typeof document !== 'undefined' ? document.documentElement : null)
diff --git a/packages/nc-gui/composables/useUIPermission/index.ts b/packages/nc-gui/composables/useUIPermission/index.ts
index 125670debe..fcac173c89 100644
--- a/packages/nc-gui/composables/useUIPermission/index.ts
+++ b/packages/nc-gui/composables/useUIPermission/index.ts
@@ -1,8 +1,6 @@
 import { isString } from '@vueuse/core'
-import type { Permission } from './rolePermissions'
-import rolePermissions from './rolePermissions'
-import { createSharedComposable, useGlobal, useRoles } from '#imports'
-import type { ProjectRole, Role } from '~/lib'
+import { createSharedComposable, rolePermissions, useGlobal, useRoles } from '#imports'
+import type { Permission, ProjectRole, Role } from '~/lib'
 
 const hasPermission = (role: Role | ProjectRole, hasRole: boolean, permission: Permission | string) => {
   const rolePermission = rolePermissions[role]
diff --git a/packages/nc-gui/composables/useUIPermission/rolePermissions.ts b/packages/nc-gui/composables/useUIPermission/rolePermissions.ts
index eed4e4704d..e69de29bb2 100644
--- a/packages/nc-gui/composables/useUIPermission/rolePermissions.ts
+++ b/packages/nc-gui/composables/useUIPermission/rolePermissions.ts
@@ -1,83 +0,0 @@
-import { ProjectRole, Role } from '~/lib'
-
-const rolePermissions = {
-  // general role permissions
-
-  /**
-   * Each permission value means the following
-   * `*` - which is wildcard, means all permissions are allowed
-   *  `include` - which is an object, means only the permissions listed in the object are allowed
-   *  `exclude` - which is an object, means all permissions are allowed except the ones listed in the object
-   *  `undefined` or `{}` - which is the default value, means no permissions are allowed
-   * */
-
-  /** todo: enable wildcard permission
-   *  limited permission  due to unexpected behaviour in shared base if opened in same window  */
-  [Role.Super]: '*',
-  [Role.Admin]: {} as Record<string, boolean>,
-  [Role.Guest]: {} as Record<string, boolean>,
-  [Role.User]: {
-    include: {
-      projectCreate: true,
-      projectActions: true,
-      projectSettings: true,
-    },
-  },
-
-  // Project role permissions
-  [ProjectRole.Creator]: {
-    exclude: {
-      appStore: true,
-    },
-  },
-  [ProjectRole.Owner]: {
-    exclude: {
-      appStore: true,
-    },
-  },
-  [ProjectRole.Editor]: {
-    include: {
-      smartSheet: true,
-      xcDatatableEditable: true,
-      column: true,
-      tableAttachment: true,
-      tableRowUpdate: true,
-      dataInsert: true,
-      rowComments: true,
-      gridViewOptions: true,
-      sortSync: true,
-      fieldsSync: true,
-      gridColUpdate: true,
-      filterSync: true,
-      csvImport: true,
-      apiDocs: true,
-      projectSettings: true,
-      newUser: false,
-    },
-  },
-  [ProjectRole.Commenter]: {
-    include: {
-      smartSheet: true,
-      column: true,
-      rowComments: true,
-      projectSettings: true,
-    },
-  },
-  [ProjectRole.Viewer]: {
-    include: {
-      smartSheet: true,
-      column: true,
-      projectSettings: true,
-    },
-  },
-} as const
-
-type RolePermissions = Omit<typeof rolePermissions, 'guest' | 'admin' | 'super'>
-
-type GetKeys<T> = T extends Record<any, Record<infer Key, boolean>> ? Key : never
-
-export type Permission<K extends keyof RolePermissions = keyof RolePermissions> = RolePermissions[K] extends Record<any, any>
-  ? GetKeys<RolePermissions[K]>
-  : never
-
-export default rolePermissions
diff --git a/packages/nc-gui/composables/useViewColumns.ts b/packages/nc-gui/composables/useViewColumns.ts
index 8255a556c2..27e9e1641d 100644
--- a/packages/nc-gui/composables/useViewColumns.ts
+++ b/packages/nc-gui/composables/useViewColumns.ts
@@ -1,9 +1,7 @@
 import { isSystemColumn } from 'nocodb-sdk'
 import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
-import { watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
-import { useNuxtApp } from '#app'
-import { IsPublicInj } from '#imports'
+import { IsPublicInj, computed, inject, ref, useNuxtApp, useProject, useUIPermission, watch } from '#imports'
 import type { Field } from '~/lib'
 
 export function useViewColumns(
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index 0a67928c87..b150e4cd7b 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -1,20 +1,25 @@
 import { ViewTypes } from 'nocodb-sdk'
 import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
-import { message } from 'ant-design-vue'
 import {
   IsPublicInj,
   NOCO,
+  computed,
   extractPkFromRow,
   extractSdkResponseErrorMsg,
   getHTMLEncodedText,
+  message,
+  ref,
   useApi,
   useGlobal,
   useI18n,
   useNuxtApp,
   useProject,
+  useSharedView,
+  useSmartsheetStoreOrThrow,
   useUIPermission,
 } from '#imports'
+import type { Row } from '~/lib'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map((row) => ({
@@ -23,17 +28,6 @@ const formatData = (list: Record<string, any>[]) =>
     rowMeta: {},
   }))
 
-export interface Row {
-  row: Record<string, any>
-  oldRow: Record<string, any>
-  rowMeta: {
-    new?: boolean
-    selected?: boolean
-    commentCount?: number
-    changed?: boolean
-  }
-}
-
 export function useViewData(
   meta: Ref<TableType | undefined> | ComputedRef<TableType | undefined>,
   viewMeta: Ref<ViewType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
@@ -44,21 +38,32 @@ export function useViewData(
   }
 
   const { t } = useI18n()
+
   const { api, isLoading, error } = useApi()
-  const { appInfo } = $(useGlobal())
+
+const { appInfo } = $(useGlobal())
   const appInfoDefaultLimit = appInfo.defaultLimit || 25
   const _paginationData = ref<PaginatedType>({ page: 1, pageSize: appInfoDefaultLimit })
   const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
+
   const galleryData = ref<GalleryType>()
+
   const formColumnData = ref<FormType>()
+
   const formViewData = ref<FormType>()
+
   const formattedData = ref<Row[]>([])
 
   const isPublic = inject(IsPublicInj, ref(false))
+
   const { project, isSharedBase } = useProject()
+
   const { fetchSharedViewData, paginationData: sharedPaginationData } = useSharedView()
+
   const { $api, $e } = useNuxtApp()
+
   const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
+
   const { isUIAllowed } = useUIPermission()
 
   const paginationData = computed({
diff --git a/packages/nc-gui/composables/useViewFilters.ts b/packages/nc-gui/composables/useViewFilters.ts
index 331162e4c2..06098fdecb 100644
--- a/packages/nc-gui/composables/useViewFilters.ts
+++ b/packages/nc-gui/composables/useViewFilters.ts
@@ -1,12 +1,12 @@
 import type { FilterType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
-import { message } from 'ant-design-vue'
 import {
   IsPublicInj,
   ReloadViewDataHookInj,
   computed,
   extractSdkResponseErrorMsg,
   inject,
+  message,
   ref,
   useMetas,
   useNuxtApp,
@@ -34,6 +34,7 @@ export function useViewFilters(
   const { isUIAllowed } = useUIPermission()
 
   const { metas } = useMetas()
+
   const _filters = ref<Filter[]>([])
 
   const nestedMode = computed(() => isPublic.value || !isUIAllowed('filterSync' || !isUIAllowed('filterChildrenRead')))
diff --git a/packages/nc-gui/composables/useViewSorts.ts b/packages/nc-gui/composables/useViewSorts.ts
index 0bdea92335..667be05eb5 100644
--- a/packages/nc-gui/composables/useViewSorts.ts
+++ b/packages/nc-gui/composables/useViewSorts.ts
@@ -1,21 +1,35 @@
 import type { SortType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { message } from 'ant-design-vue'
-import { IsPublicInj, ReloadViewDataHookInj, extractSdkResponseErrorMsg, useNuxtApp } from '#imports'
+import {
+  IsPublicInj,
+  ReloadViewDataHookInj,
+  extractSdkResponseErrorMsg,
+  inject,
+  message,
+  ref,
+  useNuxtApp,
+  useProject,
+  useSharedView,
+  useSmartsheetStoreOrThrow,
+  useUIPermission,
+  watch,
+} from '#imports'
 
 export function useViewSorts(view: Ref<ViewType | undefined>, reloadData?: () => void) {
   const { sharedView } = useSharedView()
-  const { sorts } = useSmartsheetStoreOrThrow()
-
-  const reloadHook = inject(ReloadViewDataHookInj)
 
-  const isPublic = inject(IsPublicInj, ref(false))
+  const { sorts } = useSmartsheetStoreOrThrow()
 
   const { $api, $e } = useNuxtApp()
 
   const { isUIAllowed } = useUIPermission()
+
   const { isSharedBase } = useProject()
 
+  const reloadHook = inject(ReloadViewDataHookInj)
+
+  const isPublic = inject(IsPublicInj, ref(false))
+
   const loadSorts = async () => {
     if (isPublic.value) {
       // todo: sorts missing on `ViewType`
diff --git a/packages/nc-gui/composables/useVirtualCell.ts b/packages/nc-gui/composables/useVirtualCell.ts
index 856b3d0143..517cd63904 100644
--- a/packages/nc-gui/composables/useVirtualCell.ts
+++ b/packages/nc-gui/composables/useVirtualCell.ts
@@ -3,26 +3,26 @@ import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { computed } from '#imports'
 
-export function useVirtualCell(column: Ref<ColumnType>) {
+export function useVirtualCell(column: Ref<ColumnType | undefined>) {
   const isHm = computed(
     () =>
-      column?.value?.uidt === UITypes.LinkToAnotherRecord &&
-      (<LinkToAnotherRecordType>column?.value?.colOptions).type === RelationTypes.HAS_MANY,
+      column.value?.uidt === UITypes.LinkToAnotherRecord &&
+      (<LinkToAnotherRecordType>column.value?.colOptions).type === RelationTypes.HAS_MANY,
   )
   const isMm = computed(
     () =>
-      column?.value?.uidt === UITypes.LinkToAnotherRecord &&
-      (<LinkToAnotherRecordType>column?.value?.colOptions).type === RelationTypes.MANY_TO_MANY,
+      column.value?.uidt === UITypes.LinkToAnotherRecord &&
+      (<LinkToAnotherRecordType>column.value?.colOptions).type === RelationTypes.MANY_TO_MANY,
   )
   const isBt = computed(
     () =>
-      column?.value?.uidt === UITypes.LinkToAnotherRecord &&
-      (<LinkToAnotherRecordType>column?.value?.colOptions).type === RelationTypes.BELONGS_TO,
+      column.value?.uidt === UITypes.LinkToAnotherRecord &&
+      (<LinkToAnotherRecordType>column.value?.colOptions).type === RelationTypes.BELONGS_TO,
   )
-  const isLookup = computed(() => column?.value?.uidt === UITypes.Lookup)
-  const isRollup = computed(() => column?.value?.uidt === UITypes.Rollup)
-  const isFormula = computed(() => column?.value?.uidt === UITypes.Formula)
-  const isCount = computed(() => column?.value?.uidt === UITypes.Count)
+  const isLookup = computed(() => column.value?.uidt === UITypes.Lookup)
+  const isRollup = computed(() => column.value?.uidt === UITypes.Rollup)
+  const isFormula = computed(() => column.value?.uidt === UITypes.Formula)
+  const isCount = computed(() => column.value?.uidt === UITypes.Count)
 
   return {
     isHm,
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index 556fea9767..dbfc67433e 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -2,8 +2,7 @@ import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
 import type { EventHook } from '@vueuse/core'
 import type { useViewData } from '#imports'
-import type { Row } from '~/composables'
-import type { TabItem } from '~/composables/useTabs'
+import type { Row, TabItem } from '~/lib'
 
 export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell')
 export const IsPublicInj: InjectionKey<Ref<boolean>> = Symbol('is-public')
diff --git a/packages/nc-gui/layouts/base.vue b/packages/nc-gui/layouts/base.vue
index 715f128d16..a25a56d75c 100644
--- a/packages/nc-gui/layouts/base.vue
+++ b/packages/nc-gui/layouts/base.vue
@@ -65,13 +65,13 @@ hooks.hook('page:finish', () => {
 
         <div class="flex-1" />
 
-        <GeneralReleaseInfo />
+        <LazyGeneralReleaseInfo />
 
         <a-tooltip placement="bottom" :mouse-enter-delay="1">
           <template #title> Switch language</template>
 
           <div class="flex pr-4 items-center text-white">
-            <GeneralLanguage class="cursor-pointer text-2xl hover:text-accent" />
+            <LazyGeneralLanguage class="cursor-pointer text-2xl hover:text-accent" />
           </div>
         </a-tooltip>
 
@@ -122,7 +122,7 @@ hooks.hook('page:finish', () => {
       <a-tooltip placement="bottom">
         <template #title> Switch language</template>
 
-        <GeneralLanguage v-if="!signedIn" class="nc-lang-btn" />
+        <LazyGeneralLanguage v-if="!signedIn" class="nc-lang-btn" />
       </a-tooltip>
 
       <div class="w-full h-full overflow-hidden">
diff --git a/packages/nc-gui/layouts/shared-view.vue b/packages/nc-gui/layouts/shared-view.vue
index a23a834fa8..9c9b026669 100644
--- a/packages/nc-gui/layouts/shared-view.vue
+++ b/packages/nc-gui/layouts/shared-view.vue
@@ -48,6 +48,7 @@ export default {
             <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
           </a-tooltip>
         </div>
+
         <div>
           <div class="flex justify-center items-center">
             <div class="flex items-center gap-2 ml-3 text-white">
@@ -56,12 +57,14 @@ export default {
 
                 <MdiReload :class="{ 'animate-infinite animate-spin ': isLoading }" />
               </template>
+
               <div v-else class="text-xl font-semibold truncate text-white nc-shared-view-title">
                 {{ sharedView?.title }}
               </div>
             </div>
           </div>
         </div>
+
         <div class="flex-1" />
       </a-layout-header>
 
diff --git a/packages/nc-gui/lib/constants.ts b/packages/nc-gui/lib/constants.ts
index 4365a0ab38..d140a7d7c5 100644
--- a/packages/nc-gui/lib/constants.ts
+++ b/packages/nc-gui/lib/constants.ts
@@ -1,3 +1,57 @@
+import { ProjectRole, Role } from './enums'
+
 export const NOCO = 'noco'
+
 export const SYSTEM_COLUMNS = ['id', 'title', 'created_at', 'updated_at']
-export const BASE_URL = process.env.NC_BACKEND_URL || (process.env.NODE_ENV === 'production' ? '..' : 'http://localhost:8080')
+
+export const BASE_URL =
+  process.env.NC_BACKEND_URL || (process.env.NODE_ENV === 'production' ? 'http://localhost:8080' : 'http://localhost:8080')
+
+export const rolePermissions = {
+  // general role permissions
+  /** todo: enable wildcard permission
+   *  limited permission  due to unexpected behaviour in shared base if opened in same window  */
+  [Role.Super]: {
+    projectTheme: true,
+  },
+  [Role.Admin]: {},
+  [Role.Guest]: {},
+  [Role.User]: {
+    projectCreate: true,
+    projectActions: true,
+    projectSettings: true,
+  },
+
+  // Project role permissions
+  [ProjectRole.Creator]: '*',
+  [ProjectRole.Owner]: '*',
+  [ProjectRole.Editor]: {
+    smartSheet: true,
+    xcDatatableEditable: true,
+    column: true,
+    tableAttachment: true,
+    tableRowUpdate: true,
+    dataInsert: true,
+    rowComments: true,
+    gridViewOptions: true,
+    sortSync: true,
+    fieldsSync: true,
+    gridColUpdate: true,
+    filterSync: true,
+    csvImport: true,
+    apiDocs: true,
+    projectSettings: true,
+    newUser: false,
+  },
+  [ProjectRole.Commenter]: {
+    smartSheet: true,
+    column: true,
+    rowComments: true,
+    projectSettings: true,
+  },
+  [ProjectRole.Viewer]: {
+    smartSheet: true,
+    column: true,
+    projectSettings: true,
+  },
+} as const
diff --git a/packages/nc-gui/lib/enums.ts b/packages/nc-gui/lib/enums.ts
index ae592dce09..43c6aa0888 100644
--- a/packages/nc-gui/lib/enums.ts
+++ b/packages/nc-gui/lib/enums.ts
@@ -70,3 +70,9 @@ export enum LockType {
   Locked = 'locked',
   Collaborative = 'collaborative',
 }
+
+export enum TabType {
+  TABLE = 'table',
+  VIEW = 'view',
+  AUTH = 'auth',
+}
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index 6a8e509532..4328feb9ad 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -1,6 +1,8 @@
 import type { FilterType } from 'nocodb-sdk'
 import type { I18n } from 'vue-i18n'
-import type { ProjectRole, Role } from './enums'
+import type { Theme as AntTheme } from 'ant-design-vue/es/config-provider'
+import type { ProjectRole, Role, TabType } from './enums'
+import type { rolePermissions } from './constants'
 
 export interface User {
   id: string
@@ -36,3 +38,35 @@ export type Roles<T extends Role | ProjectRole = Role | ProjectRole> = Record<T
 export type Filter = FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string; readOnly?: boolean }
 
 export type NocoI18n = I18n<{}, unknown, unknown, string, false>
+
+export interface ThemeConfig extends AntTheme {
+  primaryColor: string
+  accentColor: string
+}
+
+export interface Row {
+  row: Record<string, any>
+  oldRow: Record<string, any>
+  rowMeta: {
+    new?: boolean
+    selected?: boolean
+    commentCount?: number
+    changed?: boolean
+  }
+}
+
+type RolePermissions = Omit<typeof rolePermissions, 'creator' | 'owner' | 'guest' | 'admin'>
+
+type GetKeys<T> = T extends Record<string, any> ? keyof T : never
+
+export type Permission<K extends keyof RolePermissions = keyof RolePermissions> = RolePermissions[K] extends Record<string, any>
+  ? GetKeys<RolePermissions[K]>
+  : never
+
+export interface TabItem {
+  type: TabType
+  title: string
+  id?: string
+  viewTitle?: string
+  viewId?: string
+}
diff --git a/packages/nc-gui/nuxt.config.ts b/packages/nc-gui/nuxt.config.ts
index 7db9f21cf1..4e664c870a 100644
--- a/packages/nc-gui/nuxt.config.ts
+++ b/packages/nc-gui/nuxt.config.ts
@@ -160,6 +160,10 @@ export default defineNuxtConfig({
     imports: [
       { name: 'useI18n', from: 'vue-i18n' },
       { name: 'message', from: 'ant-design-vue/es' },
+      { name: 'Modal', from: 'ant-design-vue/es' },
+      { name: 'Empty', from: 'ant-design-vue/es' },
+      { name: 'Form', from: 'ant-design-vue/es' },
+      { name: 'useJwt', from: '@vueuse/integrations/useJwt' },
     ],
   },
 
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 526e30d3cf..a45f15548b 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { message } from 'ant-design-vue'
-import tinycolor from 'tinycolor2'
 import {
   computed,
   definePageMeta,
+  message,
   navigateTo,
   onBeforeMount,
   onBeforeUnmount,
@@ -22,7 +21,7 @@ import {
   useTabs,
   useUIPermission,
 } from '#imports'
-import { TabType } from '~/composables'
+import { TabType } from '~/lib'
 
 definePageMeta({
   hideHeader: true,
@@ -73,11 +72,14 @@ function toggleDialog(value?: boolean, key?: string) {
 }
 
 const handleThemeColor = async (mode: 'swatch' | 'primary' | 'accent', color: string) => {
+  const tinycolor = await import('tinycolor2').then((d) => d.default)
+
   switch (mode) {
     case 'swatch': {
       const tcolor = tinycolor(color)
       if (tcolor.isValid()) {
         const complement = tcolor.complement()
+
         await saveTheme({
           primaryColor: color,
           accentColor: complement.toHex8String(),
@@ -87,6 +89,7 @@ const handleThemeColor = async (mode: 'swatch' | 'primary' | 'accent', color: st
     }
     case 'primary': {
       const tcolor = tinycolor(color)
+
       if (tcolor.isValid()) {
         await saveTheme({
           primaryColor: color,
@@ -96,6 +99,7 @@ const handleThemeColor = async (mode: 'swatch' | 'primary' | 'accent', color: st
     }
     case 'accent': {
       const tcolor = tinycolor(color)
+
       if (tcolor.isValid()) {
         await saveTheme({
           accentColor: color,
@@ -325,7 +329,7 @@ onBeforeUnmount(reset)
 
                         <template #expandIcon></template>
 
-                        <GeneralColorPicker
+                        <LazyGeneralColorPicker
                           :colors="projectThemeColors"
                           :row-size="9"
                           :advanced="false"
@@ -348,6 +352,7 @@ onBeforeUnmount(reset)
 
                           <!-- Primary Color -->
                           <template #expandIcon></template>
+
                           <a-sub-menu key="pick-primary">
                             <template #title>
                               <div class="nc-project-menu-item group">
@@ -355,8 +360,10 @@ onBeforeUnmount(reset)
                                 {{ $t('labels.primaryColor') }}
                               </div>
                             </template>
+
                             <template #expandIcon></template>
-                            <GeneralChromeWrapper @input="handleThemeColor('primary', $event)" />
+
+                            <LazyGeneralChromeWrapper @input="handleThemeColor('primary', $event)" />
                           </a-sub-menu>
 
                           <!-- Accent Color -->
@@ -367,8 +374,10 @@ onBeforeUnmount(reset)
                                 {{ $t('labels.accentColor') }}
                               </div>
                             </template>
+
                             <template #expandIcon></template>
-                            <GeneralChromeWrapper @input="handleThemeColor('accent', $event)" />
+
+                            <LazyGeneralChromeWrapper @input="handleThemeColor('accent', $event)" />
                           </a-sub-menu>
                         </a-sub-menu>
                       </a-sub-menu>
@@ -393,7 +402,7 @@ onBeforeUnmount(reset)
 
                       <template #expandIcon></template>
 
-                      <GeneralPreviewAs />
+                      <LazyGeneralPreviewAs />
                     </a-sub-menu>
                   </template>
                   <!-- Language -->
@@ -416,7 +425,8 @@ onBeforeUnmount(reset)
                     </template>
 
                     <template #expandIcon></template>
-                    <GeneralLanguageMenu />
+
+                    <LazyGeneralLanguageMenu />
                   </a-sub-menu>
 
                   <!-- Account -->
@@ -472,7 +482,7 @@ onBeforeUnmount(reset)
           </div>
         </div>
 
-        <DashboardTreeView v-show="isOpen" />
+        <LazyDashboardTreeView v-show="isOpen" />
       </a-layout-sider>
     </template>
 
@@ -481,7 +491,7 @@ onBeforeUnmount(reset)
 
       <NuxtPage />
 
-      <GeneralPreviewAs float />
+      <LazyGeneralPreviewAs float />
     </div>
   </NuxtLayout>
 </template>
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
index 52034e8e58..84184289a9 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
@@ -1,12 +1,7 @@
 <script setup lang="ts">
-import type { TabItem } from '~/composables'
-import { TabType } from '~/composables'
-import { TabMetaInj, provide, useGlobal, useProject, useSidebar, useTabs } from '#imports'
-import MdiAirTableIcon from '~icons/mdi/table-large'
-import MdiView from '~icons/mdi/eye-circle-outline'
-import MdiAccountGroup from '~icons/mdi/account-group'
-
-const { isLoading: isLoadingProject } = useProject()
+import type { TabItem } from '~/lib'
+import { TabType } from '~/lib'
+import { TabMetaInj, iconMap, provide, useGlobal, useSidebar, useTabs } from '#imports'
 
 const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
 
@@ -17,11 +12,11 @@ provide(TabMetaInj, activeTab)
 const icon = (tab: TabItem) => {
   switch (tab.type) {
     case TabType.TABLE:
-      return MdiAirTableIcon
+      return iconMap['mdi-table-large']
     case TabType.VIEW:
-      return MdiView
+      return iconMap['mdi-eye-circle-outline']
     case TabType.AUTH:
-      return MdiAccountGroup
+      return iconMap['mdi-account-group']
   }
 }
 
@@ -55,12 +50,15 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
                 <div class="flex items-center">
                   <component :is="icon(tab)" class="text-sm" />
                 </div>
+
                 <a-tooltip v-if="tab.title?.length > 12" placement="bottom">
                   <div class="truncate">{{ tab.title }}</div>
+
                   <template #title>
                     <div>{{ tab.title }}</div>
                   </template>
                 </a-tooltip>
+
                 <div v-else>{{ tab.title }}</div>
               </div>
             </template>
@@ -77,7 +75,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
           </div>
         </div>
 
-        <GeneralFullScreen class="nc-fullscreen-icon" />
+        <LazyGeneralFullScreen class="nc-fullscreen-icon" />
       </div>
 
       <div class="w-full min-h-[300px] flex-auto">
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
index 97d64b22eb..60b0874f5c 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TabItem } from '~/composables'
-import { TabMetaInj, until } from '#imports'
+import type { TabItem } from '~/lib'
+import { TabMetaInj, until, computed, inject, useMetas, useProject, useRoute } from '#imports'
 
 const { getMeta } = useMetas()
 
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/auth.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/auth.vue
index 0073f0c16f..dd3d59cd47 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/auth.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/auth.vue
@@ -1,7 +1,3 @@
-<script lang="ts" setup>
-import Auth from '~/components/tabs/Auth.vue'
-</script>
-
 <template>
-  <Auth />
+  <LazyTabsAuth />
 </template>
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/index.vue
index 174b5969db..49a84801d3 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/index.vue
@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import type { UploadChangeParam, UploadFile } from 'ant-design-vue'
-import { message } from 'ant-design-vue'
-import { ref, useDialog, useDropZone, useFileDialog, useNuxtApp, useProject, watch } from '#imports'
-import DlgQuickImport from '~/components/dlg/QuickImport.vue'
-import DlgTableCreate from '~/components/dlg/TableCreate.vue'
+import { message, ref, useDialog, useDropZone, useFileDialog, useNuxtApp, useProject, useUIPermission, watch } from '#imports'
 
 const dropZone = ref<HTMLDivElement>()
 
@@ -12,6 +9,7 @@ const { isOverDropZone } = useDropZone(dropZone, onDrop)
 const { files, open, reset } = useFileDialog()
 
 const { isSharedBase } = useProject()
+
 const { isUIAllowed } = useUIPermission()
 
 const { $e } = useNuxtApp()
@@ -85,7 +83,7 @@ function openQuickImportDialog(type: QuickImportTypes, file: File) {
 
   const isOpen = ref(true)
 
-  const { close, vNode } = useDialog(DlgQuickImport, {
+  const { close, vNode } = useDialog(() => import('~/components/dlg/QuickImport.vue'), {
     'modelValue': isOpen,
     'importType': type,
     'onUpdate:modelValue': closeDialog,
@@ -116,7 +114,7 @@ function openQuickImportDialog(type: QuickImportTypes, file: File) {
 
 function openCreateTable() {
   const isOpen = ref(true)
-  const { close } = useDialog(DlgTableCreate, {
+  const { close } = useDialog(() => import('~/components/dlg/TableCreate.vue'), {
     'modelValue': isOpen,
     'onUpdate:modelValue': closeDialog,
   })
@@ -150,6 +148,7 @@ function onDropZoneClick(e: MouseEvent) {
       class="flex flex-col gap-6 items-center justify-center mx-auto text-center text-gray-500 border-gray-300 border-1 w-3/5 h-1/2 rounded-md"
     >
       <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>
 
@@ -170,7 +169,9 @@ function onDropZoneClick(e: MouseEvent) {
 
         <div class="flex items-center flex-wrap justify-center gap-2 prose-lg leading-8">
           To get started, either drop a <span class="flex items-center gap-2"><PhFileCsv /> CSV,</span>
+
           <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>
 
diff --git a/packages/nc-gui/pages/[projectType]/base/[baseId].vue b/packages/nc-gui/pages/[projectType]/base/[baseId].vue
index 59668b6a35..db36d11db1 100644
--- a/packages/nc-gui/pages/[projectType]/base/[baseId].vue
+++ b/packages/nc-gui/pages/[projectType]/base/[baseId].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 /** A dummy page to redirect old shared base url from v1 to latest */
+import { useRoute, useRouter } from '#imports'
 
 const route = useRoute()
 
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 3ab3e6aea0..7443b25090 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -37,7 +37,10 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
       class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
     >
       <template v-if="sharedFormView">
-        <general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
+        <LazyGeneralNocoIcon
+          class="color-transition hover:(ring ring-accent)"
+          :class="[isLoading ? 'animated-bg-gradient' : '']"
+        />
 
         <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView?.heading }}</h1>
 
@@ -71,14 +74,14 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
             <div class="nc-form h-full max-w-3/4 mx-auto">
               <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col my-6 gap-2">
                 <div class="flex nc-form-column-label">
-                  <SmartsheetHeaderVirtualCell
+                  <LazySmartsheetHeaderVirtualCell
                     v-if="isVirtualCol(field)"
                     :column="{ ...field, title: field.label || field.title }"
                     :required="isRequired(field, field.required)"
                     :hide-menu="true"
                   />
 
-                  <SmartsheetHeaderCell
+                  <LazySmartsheetHeaderCell
                     v-else
                     :column="{ ...field, title: field.label || field.title }"
                     :required="isRequired(field, field.required)"
@@ -87,7 +90,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                 </div>
 
                 <div v-if="isVirtualCol(field)" class="mt-0">
-                  <SmartsheetVirtualCell
+                  <LazySmartsheetVirtualCell
                     class="mt-0 nc-input"
                     :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
                     :column="field"
@@ -103,7 +106,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                 </div>
 
                 <div v-else class="mt-0">
-                  <SmartsheetCell
+                  <LazySmartsheetCell
                     v-model="formState[field.title]"
                     class="nc-input"
                     :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
diff --git a/packages/nc-gui/pages/forgot-password.vue b/packages/nc-gui/pages/forgot-password.vue
index f9c92f844a..5bb1ce1232 100644
--- a/packages/nc-gui/pages/forgot-password.vue
+++ b/packages/nc-gui/pages/forgot-password.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { definePageMeta, extractSdkResponseErrorMsg, isEmail, reactive, ref, useApi, useI18n } from '#imports'
+import { definePageMeta, isEmail, reactive, ref, useApi, useI18n } from '#imports'
 
 definePageMeta({
   requiresAuth: false,
 })
 
-const { api, isLoading, error } = useApi()
+const { api, isLoading, error } = useApi({ useGlobalInstance: true })
 
 const { t } = useI18n()
 
diff --git a/packages/nc-gui/pages/index/index/[projectId].vue b/packages/nc-gui/pages/index/index/[projectId].vue
index 3e4fdb813e..d8d529348a 100644
--- a/packages/nc-gui/pages/index/index/[projectId].vue
+++ b/packages/nc-gui/pages/index/index/[projectId].vue
@@ -50,6 +50,7 @@ const renameProject = async () => {
 // select and focus title field on load
 onMounted(async () => {
   formState.title = project.value.title as string
+
   await nextTick(() => {
     // todo: replace setTimeout and follow better approach
     setTimeout(() => {
diff --git a/packages/nc-gui/pages/index/index/create-external.vue b/packages/nc-gui/pages/index/index/create-external.vue
index 9a6e0e2593..8cb23ab512 100644
--- a/packages/nc-gui/pages/index/index/create-external.vue
+++ b/packages/nc-gui/pages/index/index/create-external.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { Form, Modal } from 'ant-design-vue'
 import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
 import {
   CertTypes,
+  Form,
+  Modal,
   SSLUsage,
   clientTypes,
   computed,
@@ -33,7 +34,7 @@ const testSuccess = ref(false)
 
 const form = ref<typeof Form>()
 
-const { api, isLoading } = useApi()
+const { api, isLoading } = useApi({ useGlobalInstance: true })
 
 const { $e } = useNuxtApp()
 
diff --git a/packages/nc-gui/pages/index/index/create.vue b/packages/nc-gui/pages/index/index/create.vue
index 1362cf4733..d2ffa27896 100644
--- a/packages/nc-gui/pages/index/index/create.vue
+++ b/packages/nc-gui/pages/index/index/create.vue
@@ -16,7 +16,7 @@ import {
 
 const { $e } = useNuxtApp()
 
-const { api, isLoading } = useApi()
+const { api, isLoading } = useApi({ useGlobalInstance: true })
 
 useSidebar('nc-left-sidebar', { hasSidebar: false })
 
diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index 92dae9c56a..2de8fcc857 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { Empty, Modal } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import {
+  Empty,
+  Modal,
   computed,
   definePageMeta,
   extractSdkResponseErrorMsg,
diff --git a/packages/nc-gui/pages/signin.vue b/packages/nc-gui/pages/signin.vue
index d996cd87d1..087845cd2c 100644
--- a/packages/nc-gui/pages/signin.vue
+++ b/packages/nc-gui/pages/signin.vue
@@ -4,7 +4,7 @@ import { definePageMeta, isEmail, navigateTo, reactive, ref, useApi, useGlobal,
 
 const { signIn: _signIn } = useGlobal()
 
-const { api, isLoading, error } = useApi()
+const { api, isLoading, error } = useApi({ useGlobalInstance: true })
 
 const { t } = useI18n()
 
diff --git a/packages/nc-gui/pages/signup/[[token]].vue b/packages/nc-gui/pages/signup/[[token]].vue
index 0645740965..52e6905ca4 100644
--- a/packages/nc-gui/pages/signup/[[token]].vue
+++ b/packages/nc-gui/pages/signup/[[token]].vue
@@ -12,7 +12,7 @@ const route = useRoute()
 
 const { appInfo, signIn } = useGlobal()
 
-const { api, isLoading, error } = useApi()
+const { api, isLoading, error } = useApi({ useGlobalInstance: true })
 
 const { t } = useI18n()
 
diff --git a/packages/nc-gui/plugins/a.i18n.ts b/packages/nc-gui/plugins/a.i18n.ts
index 55cf0472fb..a0c9c2a498 100644
--- a/packages/nc-gui/plugins/a.i18n.ts
+++ b/packages/nc-gui/plugins/a.i18n.ts
@@ -1,6 +1,5 @@
-import { defineNuxtPlugin } from 'nuxt/app'
 import { createI18n } from 'vue-i18n'
-import { nextTick } from 'vue'
+import { defineNuxtPlugin, nextTick } from '#imports'
 import type { Language, NocoI18n } from '~/lib'
 import { LanguageAlias } from '~/lib'
 
diff --git a/packages/nc-gui/plugins/feedbackForm.ts b/packages/nc-gui/plugins/feedbackForm.ts
index 314131afc7..5c6e58955f 100644
--- a/packages/nc-gui/plugins/feedbackForm.ts
+++ b/packages/nc-gui/plugins/feedbackForm.ts
@@ -1,8 +1,9 @@
 import dayjs from 'dayjs'
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin, useGlobal, useNuxtApp } from '#imports'
 
 const handleFeedbackForm = async () => {
   let { feedbackForm: currentFeedbackForm } = $(useGlobal())
+
   if (!currentFeedbackForm) return
 
   const { $api } = useNuxtApp()
@@ -10,6 +11,7 @@ const handleFeedbackForm = async () => {
   const isFirstTimePolling = !currentFeedbackForm.lastFormPollDate
 
   const now = dayjs()
+
   const lastFormPolledDate = dayjs(currentFeedbackForm.lastFormPollDate)
 
   if (isFirstTimePolling || dayjs.duration(now.diff(lastFormPolledDate)).days() > 0) {
diff --git a/packages/nc-gui/plugins/resizeDirective.ts b/packages/nc-gui/plugins/resizeDirective.ts
index d36a1396ca..e22dae1c16 100644
--- a/packages/nc-gui/plugins/resizeDirective.ts
+++ b/packages/nc-gui/plugins/resizeDirective.ts
@@ -1,4 +1,4 @@
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin, getCurrentInstance } from '#imports'
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.directive('xc-ver-resize', {
@@ -18,6 +18,7 @@ export default defineNuxtPlugin((nuxtApp) => {
       resizer.addEventListener('mousedown', initDrag, false)
 
       const instance = getCurrentInstance()
+
       const emit =
         instance?.emit ??
         ((arg, data) => {
diff --git a/packages/nc-gui/plugins/tele.ts b/packages/nc-gui/plugins/tele.ts
index 481dd133f3..ebcd4ad160 100644
--- a/packages/nc-gui/plugins/tele.ts
+++ b/packages/nc-gui/plugins/tele.ts
@@ -1,7 +1,6 @@
-import { defineNuxtPlugin } from 'nuxt/app'
 import type { Socket } from 'socket.io-client'
 import io from 'socket.io-client'
-import type { UseGlobalReturn } from '~/composables/useGlobal/types'
+import { defineNuxtPlugin, useGlobal, useRoute, useRouter, watch } from '#imports'
 
 // todo: ignore init if tele disabled
 export default defineNuxtPlugin(async (nuxtApp) => {
@@ -75,7 +74,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     }
   }
 
-  watch((nuxtApp.$state as UseGlobalReturn).token, (newToken, oldToken) => {
+  watch((nuxtApp.$state as ReturnType<typeof useGlobal>).token, (newToken, oldToken) => {
     if (newToken && newToken !== oldToken) init(newToken)
     else if (!newToken) socket.disconnect()
   })
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index aff29794a7..1b437ee998 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -12,6 +12,29 @@ import MdiThumbUp from '~icons/mdi/thumb-up'
 import MdiThumbUpOutline from '~icons/mdi/thumb-up-outline'
 import MdiFlag from '~icons/mdi/flag'
 import MdiFlagOutline from '~icons/mdi/flag-outline'
+import MdiTableLarge from '~icons/mdi/table-large'
+import MdiEyeCircleOutline from '~icons/mdi/eye-circle-outline'
+import MdiAccountGroup from '~icons/mdi/account-group'
+
+export const iconMap = {
+  'mdi-check-bold': MdiCheckBold,
+  'mdi-crop-square': MdiCropSquare,
+  'mdi-check-circle-outline': MdiCheckCircleOutline,
+  'mdi-checkbox-blank-circle-outline': MdiCheckboxBlankCircleOutline,
+  'mdi-star': MdiStar,
+  'mdi-star-outline': MdiStarOutline,
+  'mdi-heart': MdiHeart,
+  'mdi-heart-outline': MdiHeartOutline,
+  'mdi-moon-full': MdiMoonFull,
+  'mdi-moon-new': MdiMoonNew,
+  'mdi-thumb-up': MdiThumbUp,
+  'mdi-thumb-up-outline': MdiThumbUpOutline,
+  'mdi-flag': MdiFlag,
+  'mdi-flag-outline': MdiFlagOutline,
+  'mdi-table-large': MdiTableLarge,
+  'mdi-eye-circle-outline': MdiEyeCircleOutline,
+  'mdi-account-group': MdiAccountGroup,
+} as const
 
 export const getMdiIcon = (type: string): any => {
   switch (type) {
@@ -43,5 +66,11 @@ export const getMdiIcon = (type: string): any => {
       return MdiFlag
     case 'mdi-flag-outline':
       return MdiFlagOutline
+    case 'mdi-table-large':
+      return MdiTableLarge
+    case 'mdi-eye-circle-outline':
+      return MdiEyeCircleOutline
+    case 'mdi-account-group':
+      return MdiAccountGroup
   }
 }