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] 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')