Load more with a button

How to do it

Endless scrolling hides the footer, loses the position on Back and is hard to use by keyboard. Put the cursor in the address, as state in the address describes, so Back and reload return to the same place. Say how many items are shown, such as "Showing 100 of 2,340". Give each new item tabindex="-1" before focusing it.

Example

export async function loadMore(list: HTMLElement, button: HTMLButtonElement) {
  const page = await api.get(button.dataset.next!);
  const items = page.items.map(renderItem);
  list.append(...items);
  items[0]?.setAttribute('tabindex', '-1');
  items[0]?.focus();
  page.nextCursor ? (button.dataset.next = `/api/orders?cursor=${page.nextCursor}`) : button.remove();
}

@app.get("/orders/more")
def more_orders():
    page = orders.list(current_user().account_id, cursor=request.args.get("cursor"), limit=PAGE_SIZE)
    return render_template("orders/_more.html", page=page)

<!-- orders/_more.html: rows plus a new button, swapped in place of the old one -->
<button hx-get="/orders/more?cursor=c_9f2" hx-target="this" hx-swap="outerHTML" hx-push-url="/orders?cursor=c_9f2">Load more</button>

How to check

A browser test presses "Load more" with the keyboard. The new items appear, focus is on the first new one, and the footer can still be reached.