feat: make Load more elements fetch the next page

[ronjalh]

Summary

"Load more elements" works: it fetches the next page of the search and adds it below the results that are shown. When everything is shown ("Showing N of N") the button is disabled.

Part of #110 (the one issue for making the whole Elements page work, in several pull requests). The filters and the sort are still only drawn.

Stacked on #118 (the base is 117-connect-elements-search, which is stacked on #114). Change the base to dev when #118 is merged, before merging this.

What is in it

• The next page: fetchMore with after: endCursor of the last page. It uses its own query, SearchCatalogMore, which does not ask for totalCount (the API counts only when it is asked, and the cache keeps the first count). The cache already adds the page to the list of that search (src/lib/apollo/cache.ts), and "Showing X of Y" counts the rows.
• The button:
  • Disabled when there is no next page (hasNextPage false, so "Showing N of N"), and the count describes why (aria-describedby points to it, so a screen reader hears "Showing 36 of 36").
  • Disabled and "Loading more…" with aria-busy while the next page is on its way, so a double click does not fetch the same page twice. It is also disabled while a new search is loading.
  • If the next page fails, the message of describeError is shown in an alert, with "Press the button to try again". The results that are shown stay. The message goes away with the next search.
• "1000+": the text says "Showing 20 of 1000+" when the server counts more than 1000 (formatTotal). The server stops counting at 1001 (feat: stop counting the matches of a search at 1001 #121, which goes to dev on its own: the page shows 1000+ for any count above 1000, so it works with or without it). The catalog has 562 entries, so the real page shows a number today.
• A new search starts again with the first page (a request without after).
• Docs: docs/AI_USAGE.md.

Testing

• npx vitest run: 41 files, 403 tests passed. New: 3 for "1000+" (the number up to 1000, 1000+ above it, in the page and in formatTotal), and 7 for the button (the next page with the cursor and the order, no count in the next query, a double click and the loading state, disabled when everything is shown and described by the count, disabled when the last page has come, error and a new try, a new search from the first page). The old test that said "Load more is not connected" is changed.
• I broke six behaviors one at a time (disabled when everything is shown, disabled while loading, the cursor, the query for the next page, the error of the old search, the description); the tests fail without each of them.
• eslint, tsc -b and npm run build pass.
• Tried in a browser against the real backend: 20, 40 and 60 of 562; one result (yurchenko) has the button disabled at once; handspring has two pages (20, then 36 of 36) and the button is disabled at the end.

Open points

• The cache keeps the pages of a search. Going back to an earlier search shows the pages that were loaded for it, without a new request.

🤖 Generated with Claude Code

[ronjalh]

Merged into #114, which is now the one pull request for the Elements page (the design, the search, the results, Load more and the count that stops at 1001). All the commits are in the branch of #114.

Comment made with Claude Code in discussion with Ronja