u

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;
-    // Load next batch when the pagination comes close to the end (within 2 pages).
-    if (pageCount - page <= 2) {
-      void orderAutomat.actions.loadMore();
+    const pageSize = meta?.pageSize ?? 10;
+    const loadedPages = Math.ceil(this.state.items.length / pageSize);
+    // Load next batch when the pagination comes close to the end of loaded items (within 2 pages) or beyond.
+    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