fix: Added generic pagination

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const props = defineProps<{
+  current: number
+  total: number
+  pageSize: number
+}>()
+
+const emits = defineEmits(['update:current', 'update:pageSize'])
+
+const { total } = toRefs(props)
+
+const current = useVModel(props, 'current', emits)
+
+const pageSize = useVModel(props, 'pageSize', emits)
+
+const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
+
+const { isMobileMode } = useGlobal()
+
+const changePage = ({ increase }: { increase: boolean }) => {
+  if (increase && current.value < totalPages.value) {
+    current.value = current.value + 1
+  } else if (current.value > 0) {
+    current.value = current.value - 1
+  }
+}
+</script>
+
+<template>
+  <div class="nc-pagination flex flex-row items-center gap-x-2">
+    <NcButton type="secondary" size="small" :disabled="current === 1" @click="changePage({ increase: false })">
+      <GeneralIcon icon="arrowLeft" />
+    </NcButton>
+    <div class="text-gray-600">{{ current }} {{ isMobileMode ? '/' : 'of' }} {{ totalPages }}</div>
+
+    <NcButton type="secondary" size="small" :disabled="current === totalPages" @click="changePage({ increase: true })">
+      <GeneralIcon icon="arrowRight" />
+    </NcButton>
+  </div>
+</template>

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
       </span>
     </div>
 
-    <template v-if="!hidePagination">
+    <div
-      <a-pagination
+      v-if="!hidePagination"
-        v-if="count !== Infinity"
+      class="transition-all duration-350"
+      :class="{
+        '-ml-17': isLeftSidebarOpen,
+      }"
+    >
+      <div v-if="isPaginationLoading" class="flex flex-row justify-center item-center min-h-10 min-w-42">
+        <a-skeleton :active="true" :title="true" :paragraph="false" class="-mt-1 max-w-60" />
+      </div>
+      <NcPagination
+        v-else-if="count !== Infinity"
         v-model:current="page"
         v-model:page-size="size"
-        size="small"
+        class="xs:(mr-2)"
-        class="!text-xs !m-1 nc-pagination"
         :class="{ 'rtl-pagination': isRTLLanguage }"
         :total="+count"
-        show-less-items
-        :show-size-changer="false"
       />
       <div v-else class="mx-auto flex items-center mt-n1" style="max-width: 250px">
         <span class="text-xs" style="white-space: nowrap"> Change page:</span>
@@ -95,7 +103,7 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
           </template>
         </a-input>
       </div>
-    </template>
+    </div>
     <div v-if="!isMobileMode" class="flex-1 flex justify-end items-center">
       <GeneralApiTiming v-if="isEeUI && props.showApiTiming" class="m-1" />
       <div class="text-right">

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -1590,11 +1590,8 @@ const expandAndLooseFocus = (row: Row, col: Record<string, any>) => {
       </NcDropdown>
     </div>
 
-    <div v-if="showSkeleton && headerOnly !== true" class="flex flex-row justify-center item-center min-h-10">
-      <a-skeleton :active="true" :title="true" :paragraph="false" class="-mt-1 max-w-60" />
-    </div>
     <LazySmartsheetPagination
-      v-else-if="headerOnly !== true"
+      v-if="headerOnly !== true"
       :key="isMobileMode"
       v-model:pagination-data="paginationDataRef"
       show-api-timing

packages/nc-gui/composables/useViewData.ts

@@ -85,6 +85,8 @@ export function useViewData(
 
   const routeQuery = computed(() => route.value.query as Record<string, string>)
 
+  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

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,

packages/nc-gui/windi.config.ts

@@ -60,6 +60,7 @@ export default defineConfig({
           max: '480px',
         },
         sm: {
+          min: '480px',
           max: '820px',
         },
         md: {