refactor(nc-gui): use lazy components for kanban

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

@@ -23,9 +23,9 @@ useProvideSmartsheetStore(sharedView, meta, true, sorts, nestedFilters)
 <template>
   <div class="nc-container h-full mt-1.5 px-12">
     <div class="flex flex-col h-full flex-1 min-w-0">
-      <SmartsheetToolbar />
+      <LazySmartsheetToolbar />
       <div class="h-full flex-1 min-w-0 min-h-0 bg-gray-50">
-        <SmartsheetKanban />
+        <LazySmartsheetKanban />
       </div>
     </div>
   </div>

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

@@ -34,7 +34,7 @@ provide(IsKanbanInj, ref(true))
         :disabled="isLocked"
       >
         <div class="flex items-center gap-1">
-          <mdi-plus-circle-outline />
+          <MdiPlusCircleOutline />
           <span class="text-capitalize !text-sm font-weight-normal">
             {{ $t('activity.kanban.addOrEditStack') }}
           </span>
@@ -43,7 +43,7 @@ provide(IsKanbanInj, ref(true))
       </a-button>
     </div>
     <template #overlay>
-      <SmartsheetColumnEditOrAddProvider
+      <LazySmartsheetColumnEditOrAddProvider
         v-if="addOrEditStackDropdown"
         :column="groupingFieldColumn"
         @submit="handleSubmit"

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

@@ -260,7 +260,7 @@ onMounted(async () => {
                         class="flex items-center cursor-pointer w-full"
                         :class="{ capitalize: stack.title === 'uncategorized' }"
                       >
-                        <GeneralTruncateText>{{ stack.title }}</GeneralTruncateText>
+                        <LazyGeneralTruncateText>{{ stack.title }}</LazyGeneralTruncateText>
                         <span class="w-full flex w-[15px]">
                           <mdi-menu-down class="text-grey text-lg ml-auto" />
                         </span>
@@ -309,7 +309,7 @@ onMounted(async () => {
                     >
                       <template #item="{ element: record }">
                         <div class="nc-kanban-item py-2 px-[15px]">
-                          <SmartsheetRow :row="record">
+                          <LazySmartsheetRow :row="record">
                             <a-card
                               hoverable
                               :data-stack="stack.title"
@@ -328,8 +328,8 @@ onMounted(async () => {
                               >
                                 <div v-if="!isRowEmpty(record, col)" class="flex flex-row w-full justify-start pt-2">
                                   <div class="w-full text-gray-600">
-                                    <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
-                                    <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
+                                    <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
+                                    <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
                                   </div>
                                 </div>
                                 <div
@@ -337,13 +337,13 @@ onMounted(async () => {
                                   class="flex flex-row w-full items-center justify-start"
                                   :class="{ 'pt-2 pl-2': col.uidt !== UITypes.SingleSelect }"
                                 >
-                                  <SmartsheetVirtualCell
+                                  <LazySmartsheetVirtualCell
                                     v-if="isVirtualCol(col)"
                                     v-model="record.row[col.title]"
                                     :column="col"
                                     :row="record"
                                   />
-                                  <SmartsheetCell
+                                  <LazySmartsheetCell
                                     v-else
                                     v-model="record.row[col.title]"
                                     :column="col"
@@ -353,7 +353,7 @@ onMounted(async () => {
                                 </div>
                               </div>
                             </a-card>
-                          </SmartsheetRow>
+                          </LazySmartsheetRow>
                         </div>
                       </template>
                     </Draggable>
@@ -387,7 +387,7 @@ onMounted(async () => {
                 <a-skeleton v-if="!formattedData[stack.title] || !countByStack" class="!w-[150px] pl-5" :paragraph="false" />
                 <div v-else class="nc-kanban-data-count mt-[7px] mx-[10px]">
                   <div class="float-right flex gap-2 items-center cursor-pointer font-bold">
-                    <GeneralTruncateText>{{ stack.title }}</GeneralTruncateText>
+                    <LazyGeneralTruncateText>{{ stack.title }}</LazyGeneralTruncateText>
                     <mdi-menu-down class="text-grey text-lg" />
                   </div>
                   {{ formattedData[stack.title].length }} / {{ countByStack[stack.title] }}
@@ -401,7 +401,7 @@ onMounted(async () => {
     </div>
   </div>
   <div class="flex-1" />
-  <SmartsheetExpandedForm
+  <LazySmartsheetExpandedForm
     v-if="expandedFormRow && expandedFormDlg"
     v-model="expandedFormDlg"
     :row="expandedFormRow"
@@ -409,7 +409,7 @@ onMounted(async () => {
     :meta="meta"
     @cancel="removeRowFromUncategorizedStack"
   />
-  <SmartsheetExpandedForm
+  <LazySmartsheetExpandedForm
     v-if="expandedFormOnRowIdDlg"
     :key="route.query.rowId"
     v-model="expandedFormOnRowIdDlg"

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

@@ -27,8 +27,8 @@ try {
 <template>
   <NuxtLayout id="content" class="flex" name="shared-view">
     <div v-if="showPassword">
-      <SharedViewAskPassword v-model="showPassword" />
+      <LazySharedViewAskPassword v-model="showPassword" />
     </div>
-    <SharedViewKanban v-else />
+    <LazySharedViewKanban v-else />
   </NuxtLayout>
 </template>