u

src/automats/orderAutomat.js

@@ -144,7 +144,7 @@ const actions = {
    *
    * @returns {Promise<Order[]>}
    */
-  loadMore() {
+  loadMore(minNeeded) {
     const { items, total, status, loadingMore } = automat.state;
     if (status !== 'ready' || loadingMore) return Promise.resolve(items);
     if (total > 0 && items.length >= total) return Promise.resolve(items);
@@ -152,7 +152,11 @@ const actions = {
 
     automat.setState({ loadingMore: true });
     const offset = items.length;
-    inflightMore = fetchOrdersPage(offset, FETCH_PAGE_SIZE)
+    const fetchLimit =
+      minNeeded && minNeeded > offset
+        ? Math.max(FETCH_PAGE_SIZE, minNeeded - offset)
+        : FETCH_PAGE_SIZE;
+    inflightMore = fetchOrdersPage(offset, fetchLimit)
       .then(({ orders: nextBatch, total: newTotal }) => {
         const existingIds = new Set(automat.state.items.map((o) => o.id));
         const uniqueNext = nextBatch.filter((o) => !existingIds.has(o.id));

src/components/manifest/OrderList.jsx

@@ -249,6 +249,7 @@ export class OrderList extends PureComponent {
       error: s.error ? backendErrorFrom(s.error) : null,
       filteredItems: orderAutomat.actions.getOrLoad(),
       items: s.items ?? [],
+      total: s.total ?? 0,
       filter: s.filter ?? '',
       partiesById: {},
       busyId: null,
@@ -294,10 +295,11 @@ export class OrderList extends PureComponent {
   }
 
   handlePageChange(page, meta) {
-    const pageCount = meta?.pageCount ?? 1;
+    const pageSize = meta?.pageSize ?? 10;
-    // Load next batch when the pagination comes close to the end (within 2 pages).
+    const loadedPages = Math.ceil(this.state.items.length / pageSize);
-    if (pageCount - page <= 2) {
+    // Load next batch when the pagination comes close to the end of loaded items (within 2 pages) or beyond.
-      void orderAutomat.actions.loadMore();
+    if (loadedPages - page <= 2 || page > loadedPages) {
+      void orderAutomat.actions.loadMore(page * pageSize);
     }
   }
 
@@ -305,6 +307,7 @@ export class OrderList extends PureComponent {
     this._cancelled = false;
     this.unsub = orderAutomat.subscribe(this, (state) => ({
       items: state.items ?? [],
+      total: state.total ?? 0,
       filter: state.filter ?? '',
       filteredItems: state.filter
         ? filterOrders(state.items ?? [], state.filter, this.nameOf)
@@ -370,7 +373,7 @@ export class OrderList extends PureComponent {
   }
 
   render() {
-    const { status, error, items, filteredItems, partiesById, busyId } = this.state;
+    const { status, error, items, total, filter, filteredItems, partiesById, busyId } = this.state;
 
     if (status === 'loading' || status === 'idle') {
       return (
@@ -391,6 +394,7 @@ export class OrderList extends PureComponent {
     rowContext.onToggleDelivered = this.handleToggleDelivered;
 
     const rows = filteredItems ?? [];
+    const displayTotal = filter ? rows.length : (total || items.length);
 
     return (
       <>
@@ -408,7 +412,7 @@ export class OrderList extends PureComponent {
                 minPageSize={8}
                 minHeight={0}
                 items={rows}
-                totalCount={items.length}
+                totalCount={displayTotal}
                 renderItem={OrderRow}
                 header={
                   <Box