Adding loading control to make sure that pagination can't be spammed in between loads.

packages/builder/src/helpers/pagination.js

@@ -6,6 +6,7 @@ function defaultValue() {
     page: undefined,
     hasPrevPage: false,
     hasNextPage: false,
+    loading: false,
     pageNumber: 1,
     pages: [],
   }
@@ -38,6 +39,14 @@ export function createPaginationStore() {
     update(state => {
       state.hasNextPage = hasNextPage
       state.nextPage = nextPage
+      state.loading = false
+      return state
+    })
+  }
+
+  function loading(loading = true) {
+    update(state => {
+      state.loading = loading
       return state
     })
   }
@@ -51,6 +60,7 @@ export function createPaginationStore() {
     prevPage,
     nextPage,
     fetched,
+    loading,
     reset,
   }
 }

packages/builder/src/pages/builder/portal/manage/users/index.svelte

@@ -35,6 +35,7 @@
 
   async function fetchUsers(page, search) {
     try {
+      pageInfo.loading()
       await users.search({ page, search })
       pageInfo.fetched($users.hasNextPage, $users.nextPage)
     } catch (error) {
@@ -78,8 +79,8 @@
     <div class="pagination">
       <Pagination
         page={$pageInfo.pageNumber}
-        hasPrevPage={$pageInfo.hasPrevPage}
-        hasNextPage={$pageInfo.hasNextPage}
+        hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
+        hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
         goToPrevPage={pageInfo.prevPage}
         goToNextPage={pageInfo.nextPage}
       />