@invopop/popui 0.1.91 → 0.1.93

package/dist/data-table/data-table-pagination.svelte

@@ -2,6 +2,7 @@
   import Button from '../button/button.svelte'
   import InputSelect from '../InputSelect.svelte'
   import InputText from '../InputText.svelte'
+  import Skeleton from '../skeleton/skeleton.svelte'
   import { ArrowLeft, ArrowRight, ScrollLeft, ScrollRight } from '@invopop/ui-icons'
   import { cn } from '../utils.js'
   import clsx from 'clsx'
@@ -19,9 +20,11 @@
     onPageSizeChange,
     data,
     rowCount,
+    pageCount,
     manualPagination,
     disabled = false,
-    disableJumpToPage = false
+    disableJumpToPage = false,
+    countLoading = false
   }: DataTablePaginationProps<any> = $props()
 
   let currentPage = $derived(table.getState().pagination.pageIndex + 1)
@@ -34,8 +37,12 @@
     // For client-side pagination, use data length directly
     return data?.length ?? 0
   })
-  // Calculate totalPages from reactive values instead of calling table.getPageCount()
-  let totalPages = $derived(Math.ceil(totalItems / rowsPerPage) || 1)
+  // Prefer the caller-supplied pageCount when provided (manual pagination): it lets
+  // consumers express "Next is available" before an exact rowCount is known. Fall
+  // back to deriving from rowCount/data for the client-side default.
+  let totalPages = $derived(
+    manualPagination && pageCount !== undefined ? pageCount : Math.ceil(totalItems / rowsPerPage) || 1
+  )
 
   let pageInputValue = $derived(`${currentPage}`)
 
@@ -140,8 +147,13 @@
               disabled={disableJumpToPage}
             />
           </div>
-          <span class="text-base text-foreground-default-secondary whitespace-nowrap">
-            / {formatNumber(totalPages)}
+          <span class="text-base text-foreground-default-secondary whitespace-nowrap flex items-center gap-1.5">
+            /
+            {#if countLoading}
+              <Skeleton class="h-4 w-8" />
+            {:else}
+              {formatNumber(totalPages)}
+            {/if}
           </span>
         </div>
         <div class="flex items-center">
@@ -206,7 +218,12 @@
         </div>
       {/if}
     </div>
-    {#if totalItems > 0}
+    {#if countLoading}
+      <span class="text-base text-foreground-default-secondary flex items-center gap-1.5">
+        <Skeleton class="h-4 w-10" />
+        {itemsLabel}
+      </span>
+    {:else if totalItems > 0}
       <span class="text-base text-foreground-default-secondary">
         {formatNumber(totalItems)}
         {itemsLabel}

package/dist/data-table/data-table-types.d.ts

@@ -91,9 +91,11 @@ export interface DataTablePaginationProps<T> {
     onPageSizeChange?: (pageSize: number) => void;
     data?: T[];
     rowCount?: number;
+    pageCount?: number;
     manualPagination?: boolean;
     disabled?: boolean;
     disableJumpToPage?: boolean;
+    countLoading?: boolean;
 }
 export interface DataTableRowProps<TData> {
     row: Row<TData>;
@@ -152,6 +154,7 @@ export interface DataTableProps<TData> {
     manualSorting?: boolean;
     pageCount?: number;
     rowCount?: number;
+    countLoading?: boolean;
     onPageChange?: (pageIndex: number) => void;
     onPageSizeChange?: (pageSize: number) => void;
     onSortingChange?: (columnId: string, direction: TableSortBy) => void;

package/dist/data-table/data-table.svelte

@@ -68,6 +68,7 @@
     manualSorting = false,
     pageCount,
     rowCount,
+    countLoading = false,
     onPageChange,
     onPageSizeChange,
     onSortingChange,
@@ -433,10 +434,12 @@
         {table}
         {data}
         {rowCount}
+        {pageCount}
         {manualPagination}
         {onPageChange}
         {onPageSizeChange}
         {disableJumpToPage}
+        {countLoading}
         disabled={disableControls || loading}
       >
         {#if paginationSlot}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.91",
+  "version": "0.1.93",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },