From 6a3a54798e810fd80445af999f58656f8b66ace3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 23 Sep 2022 12:28:21 +0530
Subject: [PATCH 1/4] fix(gui): avoid view flickering on linking/unlinking LTAR

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/Grid.vue            | 7 ++++++-
 packages/nc-gui/components/smartsheet/Row.vue             | 4 ++--
 .../nc-gui/components/smartsheet/expanded-form/index.vue  | 2 +-
 packages/nc-gui/composables/useLTARStore.ts               | 8 ++++----
 packages/nc-gui/context/index.ts                          | 2 +-
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index c6c5c963d2..c7b5c00c47 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -430,7 +430,12 @@ watch([() => selected.row, () => selected.col], ([row, col]) => {
           </thead>
           <!-- this prevent select text from field if not in edit mode -->
           <tbody ref="tbodyEl" @selectstart.prevent>
-            <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
+            <LazySmartsheetRow
+              v-for="(row, rowIndex) of data"
+              ref="rowRefs"
+              :key="extractPkFromRow(row.row, meta.columns) ?? rowIndex"
+              :row="row"
+            >
               <template #default="{ state }">
                 <tr class="nc-grid-row">
                   <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
diff --git a/packages/nc-gui/components/smartsheet/Row.vue b/packages/nc-gui/components/smartsheet/Row.vue
index 9950f567b8..8d2a575f60 100644
--- a/packages/nc-gui/components/smartsheet/Row.vue
+++ b/packages/nc-gui/components/smartsheet/Row.vue
@@ -37,9 +37,9 @@ const reloadViewDataTrigger = inject(ReloadViewDataHookInj)!
 // override reload trigger and use it to reload row
 const reloadHook = createEventHook()
 
-reloadHook.on(() => {
+reloadHook.on((shouldShowLoading: boolean) => {
   if (isNew.value) return
-  reloadViewDataTrigger?.trigger()
+  reloadViewDataTrigger?.trigger(shouldShowLoading)
 })
 
 provide(ReloadRowDataHookInj, reloadHook)
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 56c2472dd2..3dbb20469f 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -104,7 +104,7 @@ const reloadParentRowHook = inject(ReloadRowDataHookInj, createEventHook())
 const reloadHook = createEventHook()
 
 reloadHook.on(() => {
-  reloadParentRowHook?.trigger()
+  reloadParentRowHook?.trigger(false)
   if (isNew.value) return
   loadRow()
 })
diff --git a/packages/nc-gui/composables/useLTARStore.ts b/packages/nc-gui/composables/useLTARStore.ts
index 7feb9e85f5..8c3793c595 100644
--- a/packages/nc-gui/composables/useLTARStore.ts
+++ b/packages/nc-gui/composables/useLTARStore.ts
@@ -28,7 +28,7 @@ interface DataApiResponse {
 
 /** Store for managing Link to another cells */
 const [useProvideLTARStore, useLTARStore] = useInjectionState(
-  (column: Ref<Required<ColumnType>>, row: Ref<Row>, isNewRow: ComputedRef<boolean> | Ref<boolean>, reloadData = () => {}) => {
+  (column: Ref<Required<ColumnType>>, row: Ref<Row>, isNewRow: ComputedRef<boolean> | Ref<boolean>, reloadData = (showProgress?:boolean) => {}) => {
     // state
     const { metas, getMeta } = useMetas()
 
@@ -221,7 +221,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
               return false
             }
 
-            reloadData?.()
+            reloadData?.(false)
 
             /** reload child list if not a new row */
             if (!isNewRow?.value) {
@@ -264,7 +264,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
         message.error(`${t('msg.error.unlinkFailed')}: ${await extractSdkResponseErrorMsg(e)}`)
       }
 
-      reloadData?.()
+      reloadData?.(false)
     }
 
     const link = async (row: Record<string, any>) => {
@@ -296,7 +296,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
         message.error(`Linking failed: ${await extractSdkResponseErrorMsg(e)}`)
       }
 
-      reloadData?.()
+      reloadData?.(false)
     }
 
     // watchers
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index 5127e6d325..339c17006e 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -24,7 +24,7 @@ export const ReadonlyInj: InjectionKey<boolean> = Symbol('readonly-injection')
 /** when bool is passed, it indicates if a loading spinner should be visible while reloading */
 export const ReloadViewDataHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-data-injection')
 export const ReloadViewMetaHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-meta-injection')
-export const ReloadRowDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-row-data-injection')
+export const ReloadRowDataHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-row-data-injection')
 export const OpenNewRecordFormHookInj: InjectionKey<EventHook<void>> = Symbol('open-new-record-form-injection')
 export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')

From 697b998fffce80561026e186e7afbcc03cc1b7e6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 8 Oct 2022 13:09:53 +0530
Subject: [PATCH 2/4] fix(gui): use key as index to avoid re-rendering row when
 new record saved

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/Grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index c7b5c00c47..605620545f 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -433,7 +433,7 @@ watch([() => selected.row, () => selected.col], ([row, col]) => {
             <LazySmartsheetRow
               v-for="(row, rowIndex) of data"
               ref="rowRefs"
-              :key="extractPkFromRow(row.row, meta.columns) ?? rowIndex"
+              :key="rowIndex"
               :row="row"
             >
               <template #default="{ state }">

From 5aa6d1e0f3162d0cf7245f64f4ea660760dfe044 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 8 Oct 2022 13:10:21 +0530
Subject: [PATCH 3/4] chore(gui): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/Grid.vue | 7 +------
 packages/nc-gui/composables/useLTARStore.ts    | 7 ++++++-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 605620545f..c6c5c963d2 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -430,12 +430,7 @@ watch([() => selected.row, () => selected.col], ([row, col]) => {
           </thead>
           <!-- this prevent select text from field if not in edit mode -->
           <tbody ref="tbodyEl" @selectstart.prevent>
-            <LazySmartsheetRow
-              v-for="(row, rowIndex) of data"
-              ref="rowRefs"
-              :key="rowIndex"
-              :row="row"
-            >
+            <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
               <template #default="{ state }">
                 <tr class="nc-grid-row">
                   <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
diff --git a/packages/nc-gui/composables/useLTARStore.ts b/packages/nc-gui/composables/useLTARStore.ts
index 8c3793c595..3e7ad5a304 100644
--- a/packages/nc-gui/composables/useLTARStore.ts
+++ b/packages/nc-gui/composables/useLTARStore.ts
@@ -28,7 +28,12 @@ interface DataApiResponse {
 
 /** Store for managing Link to another cells */
 const [useProvideLTARStore, useLTARStore] = useInjectionState(
-  (column: Ref<Required<ColumnType>>, row: Ref<Row>, isNewRow: ComputedRef<boolean> | Ref<boolean>, reloadData = (showProgress?:boolean) => {}) => {
+  (
+    column: Ref<Required<ColumnType>>,
+    row: Ref<Row>,
+    isNewRow: ComputedRef<boolean> | Ref<boolean>,
+    reloadData = (_showProgress?: boolean) => {},
+  ) => {
     // state
     const { metas, getMeta } = useMetas()
 

From 3554401733e68925bbe899b2621c6e672620fd30 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 8 Oct 2022 14:16:41 +0530
Subject: [PATCH 4/4] refactor(gui): specify type while initializing hook

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/Row.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Row.vue b/packages/nc-gui/components/smartsheet/Row.vue
index 8d2a575f60..6854dd7081 100644
--- a/packages/nc-gui/components/smartsheet/Row.vue
+++ b/packages/nc-gui/components/smartsheet/Row.vue
@@ -35,9 +35,9 @@ watch(isNew, async (nextVal, prevVal) => {
 const reloadViewDataTrigger = inject(ReloadViewDataHookInj)!
 
 // override reload trigger and use it to reload row
-const reloadHook = createEventHook()
+const reloadHook = createEventHook<boolean | void>()
 
-reloadHook.on((shouldShowLoading: boolean) => {
+reloadHook.on((shouldShowLoading) => {
   if (isNew.value) return
   reloadViewDataTrigger?.trigger(shouldShowLoading)
 })