Finish the Browse Experience
9 min read
Finish the Pagination State
Finish the Pagination State
Make the final pagination behavior resilient when users combine navigation with filters and sorting.
Step 1 — Normalize the page
Keep the page number at a minimum of 1.
const page = Math.max(1, Number(sp.page) || 1);
Step 2 — Preserve current browse state
Keep PageLink responsible for carrying the query, genre ids, and non-default sort into the destination URL before setting the new page number.
Step 3 — Disable the edges
Disable the previous button on page one and the next button when the current page reaches the available total.
Step 4 — Cap the visible page count
Use the same 500-page cap when displaying the page summary so the UI reflects the API boundary.
Checkpoint
Browse several pages, change a genre, change the sort, and then move again. The URL and visible page number should continue to describe the actual browse state.