Merge pull request #3776 from nocodb/fix/3769-grid-flickering

Fix: Grid view flickering on LTAR link/unlink

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

@@ -35,11 +35,11 @@ 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(() => {
+reloadHook.on((shouldShowLoading) => {
   if (isNew.value) return
-  reloadViewDataTrigger?.trigger()
+  reloadViewDataTrigger?.trigger(shouldShowLoading)
 })
 
 provide(ReloadRowDataHookInj, reloadHook)

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()
 })

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 = () => {}) => {
+  (
+    column: Ref<Required<ColumnType>>,
+    row: Ref<Row>,
+    isNewRow: ComputedRef<boolean> | Ref<boolean>,
+    reloadData = (_showProgress?: boolean) => {},
+  ) => {
     // state
     const { metas, getMeta } = useMetas()
 
@@ -221,7 +226,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
               return false
             }
 
-            reloadData?.()
+            reloadData?.(false)
 
             /** reload child list if not a new row */
             if (!isNewRow?.value) {
@@ -264,7 +269,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 +301,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
         message.error(`Linking failed: ${await extractSdkResponseErrorMsg(e)}`)
       }
 
-      reloadData?.()
+      reloadData?.(false)
     }
 
     // watchers

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