Refactor showPagination function

app/assets/javascripts/jobs/components/table/constants.js

-export const GRAPHQL_PAGE_SIZE = 10;
+export const GRAPHQL_PAGE_SIZE = 30;
+
+export const initialPaginationState = {
+  currentPage: 1,
+  prevPageCursor: '',
+  nextPageCursor: '',
+  first: GRAPHQL_PAGE_SIZE,
+  last: null,
+};

app/assets/javascripts/jobs/components/table/jobs_table_app.vue

 <script>
 import { GlAlert, GlPagination, GlSkeletonLoader } from '@gitlab/ui';
 import { __ } from '~/locale';
-import { GRAPHQL_PAGE_SIZE } from './constants';
+import { GRAPHQL_PAGE_SIZE, initialPaginationState } from './constants';
 import GetJobs from './graphql/queries/get_jobs.query.graphql';
 import JobsTable from './jobs_table.vue';
 import JobsTableEmptyState from './jobs_table_empty_state.vue';
 import JobsTableTabs from './jobs_table_tabs.vue';
 
-const initialPaginationState = {
-  currentPage: 1,
-  prevPageCursor: '',
-  nextPageCursor: '',
-  first: GRAPHQL_PAGE_SIZE,
-  last: null,
-};
-
 export default {
   i18n: {
     errorMsg: __('There was an error fetching the jobs for your project.'),
@@ -79,7 +71,7 @@ export default {
       return this.jobs.pageInfo?.hasNextPage ? this.pagination.currentPage + 1 : null;
     },
     showPaginationControls() {
-      return Boolean(this.prevPage || this.nextPage);
+      return Boolean(this.prevPage || this.nextPage) && !this.$apollo.loading;
     },
   },
   methods: {
@@ -99,8 +91,8 @@ export default {
         };
       } else {
         this.pagination = {
-          lastPageSize: GRAPHQL_PAGE_SIZE,
-          firstPageSize: null,
+          last: GRAPHQL_PAGE_SIZE,
+          first: null,
           prevPageCursor: startCursor,
           currentPage: page,
         };
@@ -147,7 +139,6 @@ export default {
 
     <gl-pagination
       v-if="showPaginationControls"
-      :disabled="$apollo.loading"
       :value="pagination.currentPage"
       :prev-page="prevPage"
       :next-page="nextPage"

spec/frontend/jobs/components/table/job_table_app_spec.js

@@ -104,7 +104,6 @@ describe('Job table app', () => {
           },
           jobs: {
             pageInfo: {
-              hasNextPage: false,
               hasPreviousPage: true,
               startCursor: 'abc',
               endCursor: 'bcd',
@@ -113,12 +112,24 @@ describe('Job table app', () => {
         },
       });
 
+      await wrapper.vm.$nextTick();
+
+      wrapper.setData({
+        jobs: {
+          pageInfo: {
+            hasNextPage: false,
+          },
+        },
+      });
+
+      await wrapper.vm.$nextTick();
+
       expect(findPrevious().exists()).toBe(true);
       expect(findNext().exists()).toBe(true);
       expect(findNext().classes('disabled')).toBe(true);
     });
 
-    it('should disable the preivous page button on the first page', async () => {
+    it('should disable the previous page button on the first page', async () => {
       createComponent({
         handler: successHandler,
         mountFn: mount,
@@ -137,6 +148,8 @@ describe('Job table app', () => {
         },
       });
 
+      await wrapper.vm.$nextTick();
+
       expect(findPrevious().exists()).toBe(true);
       expect(findPrevious().classes('disabled')).toBe(true);
       expect(findNext().exists()).toBe(true);