refactor(nc-gui): hide loading spinner when reloading from view filters

packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue

@@ -46,9 +46,7 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
   activeView,
   parentId,
   computed(() => autoSave),
-  () => {
-    reloadDataHook.trigger()
-  },
+  reloadDataHook.trigger,
   modelValue || nestedFilters.value,
   !modelValue,
 )

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

@@ -23,6 +23,7 @@ import {
   provide,
   reactive,
   ref,
+  useClipboard,
   useEventListener,
   useGridViewColumnWidth,
   useI18n,
@@ -96,6 +97,8 @@ const {
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
 
+const { copy } = useClipboard()
+
 onMounted(loadGridViewColumns)
 
 provide(IsFormInj, ref(false))
@@ -113,8 +116,15 @@ provide(ReadonlyInj, !hasEditPermission)
 const disableUrlOverlay = ref(false)
 provide(CellUrlDisableOverlayInj, disableUrlOverlay)
 
-reloadViewDataHook?.on(async () => {
+const showLoading = ref(true)
+
+reloadViewDataHook?.on(async (shouldShowLoading) => {
+  // set value if spinner should be hidden
+  showLoading.value = !!shouldShowLoading
   await loadData()
+
+  // reset to default (showing spinner on load)
+  showLoading.value = true
 })
 
 const skipRowRemovalOnCancel = ref(false)
@@ -179,8 +189,6 @@ const clearCell = async (ctx: { row: number; col: number }) => {
   await updateOrSaveRow(rowObj, columnObj.title)
 }
 
-const { copy } = useClipboard()
-
 const makeEditable = (row: Row, col: ColumnType) => {
   if (!hasEditPermission || editEnabled || isView) {
     return
@@ -373,10 +381,12 @@ onBeforeUnmount(async () => {
 
 <template>
   <div class="flex flex-col h-full min-h-0 w-full">
-    <div v-if="isLoading" class="flex items-center justify-center h-full w-full">
-      <a-spin size="large" />
-    </div>
-    <div v-else class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
+    <general-overlay :model-value="isLoading" inline transition>
+      <div class="flex items-center justify-center h-full w-full">
+        <a-spin size="large" />
+      </div>
+    </general-overlay>
+    <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
       <a-dropdown
         v-model:visible="contextMenu"
         :trigger="isSqlView ? [] : ['contextmenu']"

packages/nc-gui/composables/useViewFilters.ts

@@ -19,7 +19,7 @@ export function useViewFilters(
   view: Ref<ViewType | undefined>,
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
-  reloadData?: () => void,
+  reloadData?: (showLoading?: boolean) => void,
   currentFilters?: Filter[],
   isNestedRoot?: boolean,
 ) {
@@ -110,7 +110,7 @@ export function useViewFilters(
         }
       }
 
-      reloadData?.()
+      reloadData?.(false)
     } catch (e: any) {
       console.log(e)
       message.error(await extractSdkResponseErrorMsg(e))
@@ -122,7 +122,7 @@ export function useViewFilters(
     if (nestedMode.value) {
       filters.value.splice(i, 1)
       filters.value = [...filters.value]
-      reloadData?.()
+      reloadData?.(false)
     } else {
       if (filter.id) {
         // if auto-apply disabled mark it as disabled
@@ -133,7 +133,7 @@ export function useViewFilters(
           try {
             await $api.dbTableFilter.delete(filter.id)
 
-            reloadData?.()
+            reloadData?.(false)
 
             filters.value.splice(i, 1)
           } catch (e: any) {
@@ -150,7 +150,7 @@ export function useViewFilters(
   }
 
   const saveOrUpdate = async (filter: Filter, i: number, force = false) => {
-    if (!view?.value) return
+    if (!view.value) return
 
     try {
       if (nestedMode.value) {
@@ -179,7 +179,7 @@ export function useViewFilters(
       message.error(await extractSdkResponseErrorMsg(e))
     }
 
-    reloadData?.()
+    reloadData?.(false)
   }
 
   const addFilter = () => {

packages/nc-gui/context/index.ts

@@ -21,7 +21,9 @@ export const IsLockedInj: InjectionKey<Ref<boolean>> = Symbol('is-locked-injecti
 export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')
 export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<boolean> = Symbol('readonly-injection')
-export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-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 ReloadRowDataHookInj: InjectionKey<EventHook<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')