feat: change page abort

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import axios from 'axios'
 import type { PaginatedType } from 'nocodb-sdk'
 import { IsGroupByInj, computed, iconMap, inject, isRtlLang, useI18n } from '#imports'
 import type { Language } from '#imports'
@@ -47,9 +48,11 @@ const page = computed({
     isViewDataLoading.value = true
     try {
       await changePage?.(p)
+      isViewDataLoading.value = false
     } catch (e) {
-      console.error(e)
-    } finally {
+      if (axios.isCancel(e)) {
+        return
+      }
       isViewDataLoading.value = false
     }
   },

packages/nc-gui/composables/useViewData.ts

@@ -1,4 +1,5 @@
 import { ViewTypes } from 'nocodb-sdk'
+import axios from 'axios'
 import type { Api, ColumnType, FormColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import {
@@ -166,16 +167,34 @@ export function useViewData(
     }
   }
 
+  const controller = ref()
+
   async function loadData(params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) {
     if ((!base?.value?.id || !metaId.value || !viewMeta.value?.id) && !isPublic.value) return
+
+    if (controller.value) {
+      controller.value.cancel()
+    }
+
+    const CancelToken = axios.CancelToken
+
+    controller.value = CancelToken.source()
+
     const response = !isPublic.value
-      ? await api.dbViewRow.list('noco', base.value.id!, metaId.value!, viewMeta.value!.id!, {
+      ? await api.dbViewRow.list(
+          'noco',
+          base.value.id!,
+          metaId.value!,
+          viewMeta.value!.id!,
+          {
             ...queryParams.value,
             ...params,
             ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
             ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
             where: where?.value,
-        } as any)
+          } as any,
+          { cancelToken: controller.value.token },
+        )
       : await fetchSharedViewData({ sortsArr: sorts.value, filtersArr: nestedFilters.value })
 
     formattedData.value = formatData(response.list)