fix(nc-gui): wrap LazySmartsheetExpandedForm by Suspense

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

@@ -251,24 +251,29 @@ watch(view, async (nextView) => {
 
     <LazySmartsheetPagination />
 
-    <LazySmartsheetExpandedForm
+    <Suspense>
-      v-if="expandedFormRow && expandedFormDlg"
+      <LazySmartsheetExpandedForm
-      v-model="expandedFormDlg"
+        v-if="expandedFormRow && expandedFormDlg"
-      :row="expandedFormRow"
+        v-model="expandedFormDlg"
-      :state="expandedFormRowState"
+        :row="expandedFormRow"
-      :meta="meta"
+        :state="expandedFormRowState"
-      :view="view"
+        :meta="meta"
-    />
+        :view="view"
-
+        @update:model-value="!skipRowRemovalOnCancel && removeRowIfNew(expandedFormRow)"
-    <LazySmartsheetExpandedForm
+      />
-      v-if="expandedFormOnRowIdDlg"
+    </Suspense>
-      :key="route.query.rowId"
+
-      v-model="expandedFormOnRowIdDlg"
+    <Suspense>
-      :row="{ row: {}, oldRow: {}, rowMeta: {} }"
+      <LazySmartsheetExpandedForm
-      :meta="meta"
+        v-if="expandedFormOnRowIdDlg"
-      :row-id="route.query.rowId"
+        :key="route.query.rowId"
-      :view="view"
+        v-model="expandedFormOnRowIdDlg"
-    />
+        :row="{ row: {}, oldRow: {}, rowMeta: {} }"
+        :meta="meta"
+        :row-id="route.query.rowId"
+        :view="view"
+      />
+    </Suspense>
   </div>
 </template>
 

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

@@ -556,25 +556,29 @@ watch(
 
     <LazySmartsheetPagination />
 
-    <LazySmartsheetExpandedForm
+    <Suspense>
-      v-if="expandedFormRow && expandedFormDlg"
+      <LazySmartsheetExpandedForm
-      v-model="expandedFormDlg"
+        v-if="expandedFormRow && expandedFormDlg"
-      :row="expandedFormRow"
+        v-model="expandedFormDlg"
-      :state="expandedFormRowState"
+        :row="expandedFormRow"
-      :meta="meta"
+        :state="expandedFormRowState"
-      :view="view"
+        :meta="meta"
-      @update:model-value="!skipRowRemovalOnCancel && removeRowIfNew(expandedFormRow)"
+        :view="view"
-    />
+        @update:model-value="!skipRowRemovalOnCancel && removeRowIfNew(expandedFormRow)"
-
+      />
-    <LazySmartsheetExpandedForm
+    </Suspense>
-      v-if="expandedFormOnRowIdDlg"
+
-      :key="route.query.rowId"
+    <Suspense>
-      v-model="expandedFormOnRowIdDlg"
+      <LazySmartsheetExpandedForm
-      :row="{ row: {}, oldRow: {}, rowMeta: {} }"
+        v-if="expandedFormOnRowIdDlg"
-      :meta="meta"
+        :key="route.query.rowId"
-      :row-id="route.query.rowId"
+        v-model="expandedFormOnRowIdDlg"
-      :view="view"
+        :row="{ row: {}, oldRow: {}, rowMeta: {} }"
-    />
+        :meta="meta"
+        :row-id="route.query.rowId"
+        :view="view"
+      />
+    </Suspense>
   </div>
 </template>
 

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

@@ -64,7 +64,6 @@ const {
   groupingField,
   countByStack,
   deleteStack,
-  removeRowFromUncategorizedStack,
   shouldScrollToRight,
   deleteRow,
 } = useKanbanViewStoreOrThrow()
@@ -504,24 +503,29 @@ watch(view, async (nextView) => {
 
   <div class="flex-1" />
 
-  <LazySmartsheetExpandedForm
+  <Suspense>
-    v-if="expandedFormRow && expandedFormDlg"
+    <LazySmartsheetExpandedForm
-    v-model="expandedFormDlg"
+      v-if="expandedFormRow && expandedFormDlg"
-    :row="expandedFormRow"
+      v-model="expandedFormDlg"
-    :state="expandedFormRowState"
+      :row="expandedFormRow"
-    :meta="meta"
+      :state="expandedFormRowState"
-    @cancel="removeRowFromUncategorizedStack"
+      :meta="meta"
-  />
+      :view="view"
-
+      @update:model-value="!skipRowRemovalOnCancel && removeRowIfNew(expandedFormRow)"
-  <LazySmartsheetExpandedForm
+    />
-    v-if="expandedFormOnRowIdDlg"
+  </Suspense>
-    :key="route.query.rowId"
+
-    v-model="expandedFormOnRowIdDlg"
+  <Suspense>
-    :row="{ row: {}, oldRow: {}, rowMeta: {} }"
+    <LazySmartsheetExpandedForm
-    :meta="meta"
+      v-if="expandedFormOnRowIdDlg"
-    :row-id="route.query.rowId"
+      :key="route.query.rowId"
-    :view="view"
+      v-model="expandedFormOnRowIdDlg"
-  />
+      :row="{ row: {}, oldRow: {}, rowMeta: {} }"
+      :meta="meta"
+      :row-id="route.query.rowId"
+      :view="view"
+    />
+  </Suspense>
 
   <a-modal v-model:visible="deleteStackVModel" class="!top-[35%]" wrap-class-name="nc-modal-kanban-delete-stack">
     <template #title>