diff --git a/packages/nc-gui/components/nc/Pagination.vue b/packages/nc-gui/components/nc/Pagination.vue
new file mode 100644
index 0000000000..dbaa822d56
--- /dev/null
+++ b/packages/nc-gui/components/nc/Pagination.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
diff --git a/packages/nc-gui/components/smartsheet/Pagination.vue b/packages/nc-gui/components/smartsheet/Pagination.vue
index 7628d8c520..9715b322f3 100644
--- a/packages/nc-gui/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui/components/smartsheet/Pagination.vue
@@ -33,7 +33,9 @@ const extraStyle = toRef(props, 'extraStyle')
const isGroupBy = inject(IsGroupByInj, ref(false))
-const { isPaginationLoading } = storeToRefs(useViewsStore())
+const { isViewDataLoading, isPaginationLoading } = storeToRefs(useViewsStore())
+
+const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
const count = computed(() => vPaginationData.value?.totalRows ?? Infinity)
@@ -42,13 +44,13 @@ const size = computed(() => vPaginationData.value?.pageSize ?? 25)
const page = computed({
get: () => vPaginationData?.value?.page ?? 1,
set: async (p) => {
- isPaginationLoading.value = true
+ isViewDataLoading.value = true
try {
await changePage?.(p)
} catch (e) {
console.error(e)
} finally {
- isPaginationLoading.value = false
+ isViewDataLoading.value = false
}
},
})
@@ -75,17 +77,23 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
-
-
+
+
Change page:
@@ -95,7 +103,7 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
-
+
diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index 107dd54a10..96e2301ab0 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -1590,11 +1590,8 @@ const expandAndLooseFocus = (row: Row, col: Record) => {
-
route.value.query as Record)
+ const { isPaginationLoading } = storeToRefs(useViewsStore())
+
const paginationData = computed({
get: () => (isPublic.value ? sharedPaginationData.value : _paginationData.value),
set: (value) => {
@@ -178,6 +180,7 @@ export function useViewData(
formattedData.value = formatData(response.list)
paginationData.value = response.pageInfo
+ isPaginationLoading.value = false
// to cater the case like when querying with a non-zero offset
// the result page may point to the target page where the actual returned data don't display on
diff --git a/packages/nc-gui/store/views.ts b/packages/nc-gui/store/views.ts
index 121c9d3a2b..43a75b3309 100644
--- a/packages/nc-gui/store/views.ts
+++ b/packages/nc-gui/store/views.ts
@@ -79,7 +79,7 @@ export const useViewsStore = defineStore('viewsStore', () => {
})
// Used for Grid View Pagination
- const isPaginationLoading = ref(false)
+ const isPaginationLoading = ref(true)
const loadViews = async ({
tableId,
@@ -183,6 +183,10 @@ export const useViewsStore = defineStore('viewsStore', () => {
}
}
+ watch(activeViewTitleOrId, () => {
+ isPaginationLoading.value = true
+ })
+
return {
isLockedView,
isViewsLoading,
diff --git a/packages/nc-gui/windi.config.ts b/packages/nc-gui/windi.config.ts
index 87e05db5f1..a80a82bfde 100644
--- a/packages/nc-gui/windi.config.ts
+++ b/packages/nc-gui/windi.config.ts
@@ -60,6 +60,7 @@ export default defineConfig({
max: '480px',
},
sm: {
+ min: '480px',
max: '820px',
},
md: {