From 83a9de437f1bd9b7e29d4245274d10427a8bed83 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 6 Oct 2022 18:16:51 +0800
Subject: [PATCH] fix(nc-gui): wrap LazySmartsheetExpandedForm by Suspense

---
 .../nc-gui/components/smartsheet/Gallery.vue  | 41 ++++++++++--------
 .../nc-gui/components/smartsheet/Grid.vue     | 42 ++++++++++---------
 .../nc-gui/components/smartsheet/Kanban.vue   | 42 ++++++++++---------
 3 files changed, 69 insertions(+), 56 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 8b39514128..8bcc36efed 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -251,24 +251,29 @@ watch(view, async (nextView) => {
 
     <LazySmartsheetPagination />
 
-    <LazySmartsheetExpandedForm
-      v-if="expandedFormRow && expandedFormDlg"
-      v-model="expandedFormDlg"
-      :row="expandedFormRow"
-      :state="expandedFormRowState"
-      :meta="meta"
-      :view="view"
-    />
-
-    <LazySmartsheetExpandedForm
-      v-if="expandedFormOnRowIdDlg"
-      :key="route.query.rowId"
-      v-model="expandedFormOnRowIdDlg"
-      :row="{ row: {}, oldRow: {}, rowMeta: {} }"
-      :meta="meta"
-      :row-id="route.query.rowId"
-      :view="view"
-    />
+    <Suspense>
+      <LazySmartsheetExpandedForm
+        v-if="expandedFormRow && expandedFormDlg"
+        v-model="expandedFormDlg"
+        :row="expandedFormRow"
+        :state="expandedFormRowState"
+        :meta="meta"
+        :view="view"
+        @update:model-value="!skipRowRemovalOnCancel && removeRowIfNew(expandedFormRow)"
+      />
+    </Suspense>
+
+    <Suspense>
+      <LazySmartsheetExpandedForm
+        v-if="expandedFormOnRowIdDlg"
+        :key="route.query.rowId"
+        v-model="expandedFormOnRowIdDlg"
+        :row="{ row: {}, oldRow: {}, rowMeta: {} }"
+        :meta="meta"
+        :row-id="route.query.rowId"
+        :view="view"
+      />
+    </Suspense>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 43cfaf9e8a..7ab8cdadc6 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -556,25 +556,29 @@ watch(
 
     <LazySmartsheetPagination />
 
-    <LazySmartsheetExpandedForm
-      v-if="expandedFormRow && expandedFormDlg"
-      v-model="expandedFormDlg"
-      :row="expandedFormRow"
-      :state="expandedFormRowState"
-      :meta="meta"
-      :view="view"
-      @update:model-value="!skipRowRemovalOnCancel && removeRowIfNew(expandedFormRow)"
-    />
-
-    <LazySmartsheetExpandedForm
-      v-if="expandedFormOnRowIdDlg"
-      :key="route.query.rowId"
-      v-model="expandedFormOnRowIdDlg"
-      :row="{ row: {}, oldRow: {}, rowMeta: {} }"
-      :meta="meta"
-      :row-id="route.query.rowId"
-      :view="view"
-    />
+    <Suspense>
+      <LazySmartsheetExpandedForm
+        v-if="expandedFormRow && expandedFormDlg"
+        v-model="expandedFormDlg"
+        :row="expandedFormRow"
+        :state="expandedFormRowState"
+        :meta="meta"
+        :view="view"
+        @update:model-value="!skipRowRemovalOnCancel && removeRowIfNew(expandedFormRow)"
+      />
+    </Suspense>
+
+    <Suspense>
+      <LazySmartsheetExpandedForm
+        v-if="expandedFormOnRowIdDlg"
+        :key="route.query.rowId"
+        v-model="expandedFormOnRowIdDlg"
+        :row="{ row: {}, oldRow: {}, rowMeta: {} }"
+        :meta="meta"
+        :row-id="route.query.rowId"
+        :view="view"
+      />
+    </Suspense>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 9291e4e3d2..9b6f101ae1 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/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
-    v-if="expandedFormRow && expandedFormDlg"
-    v-model="expandedFormDlg"
-    :row="expandedFormRow"
-    :state="expandedFormRowState"
-    :meta="meta"
-    @cancel="removeRowFromUncategorizedStack"
-  />
-
-  <LazySmartsheetExpandedForm
-    v-if="expandedFormOnRowIdDlg"
-    :key="route.query.rowId"
-    v-model="expandedFormOnRowIdDlg"
-    :row="{ row: {}, oldRow: {}, rowMeta: {} }"
-    :meta="meta"
-    :row-id="route.query.rowId"
-    :view="view"
-  />
+  <Suspense>
+    <LazySmartsheetExpandedForm
+      v-if="expandedFormRow && expandedFormDlg"
+      v-model="expandedFormDlg"
+      :row="expandedFormRow"
+      :state="expandedFormRowState"
+      :meta="meta"
+      :view="view"
+      @update:model-value="!skipRowRemovalOnCancel && removeRowIfNew(expandedFormRow)"
+    />
+  </Suspense>
+
+  <Suspense>
+    <LazySmartsheetExpandedForm
+      v-if="expandedFormOnRowIdDlg"
+      :key="route.query.rowId"
+      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>