Paging of large numbers of results

[wwoast]

When searching for common photo tags, it's easy to get lots of results and the default initial limit is 25 photos.

Expand this out, by making paging logic grab photos in such a way that a query can return random ordering of results, but the paged data does not show repeated content.

[wwoast]

https://github.com/wwoast/redpanda-lineage/commit/06fdb244dc35333c1960bd95f13866cb73dd057b

[wwoast]

So, there's no reason to implement per-page navigation menus if there isn't also control over whether the results are returned in consistent ordering or not.

Right now, when searching for a tag, you get randomly-ordered results. So I'm inclined to implement only infinite-scroll or bottom-of-page-button load to return the results, albeit with a brief timer (and a fallback menu button) so that people cannot quickly load too many images at once.

[wwoast]

https://github.com/wwoast/redpanda-lineage/tree/paging is where the work is starting.

Some notes:

   callback to how the last group of photos was added
   notes on the panda id or locator used
   count values on how many additional new things to load
      25 on mobile, 100 on desktop
   only render paging button for media page and for tag-search results
      make the query / page render set a JS variable instructing the page button to load
      collect info on what the image callback is, what the search was, and whether there
      are additional results not yet displayed.
   add hr between pages of content

[wwoast]

https://github.com/wwoast/redpanda-lineage/pull/215

Leaving this open to fix some remaining paging issues:

• Page data refreshes sometimes when I don't expect, which changes the photo ordering
• The credits page photos are still not paged
• The language button redraws the page, which removes all paged content thus far
• Maybe the "Next" button should be a "More" button
• Possibly remove the overflow message (First 25 shown) entirely

One potential fix for this is encoding the number of pages of content inside the URI.

[wwoast]

Credits photo paging: https://github.com/wwoast/redpanda-lineage/pull/219

[wwoast]

For handling paged data refreshes, Query.env should have a page counter, so that prior to a reload if you had three pages of content, after the refresh it can re-show you the same content.

This is less "bookmarkable" than having the page count be part of the URL... but since URLs with page counts could subvert image paging entirely, causing whole galleries to be loaded at once, I think this is OK.

[wwoast]

https://github.com/wwoast/redpanda-lineage/commit/a0dfb1dfb7c667c6e815a0e50be08c7723441cad implements the Query.env.paging.shown_pages logic that keeps the same number of photos on a page post-refresh.

There's still a small bug where the sorting order will change after the sequence of "page increase/language change" events, but I've not consistently reproduced it.

[wwoast]

I changed the paging count from 25 to 30 here: https://github.com/wwoast/redpanda-lineage/commit/753e8bfb195fb2b6b0415cc7a81246f350bad73e. This means that whether you have two photos per row (mobile portrait), three photos per row (mobile landscape), or five photos per row (the credits page), the last row of photos will be even with the others, unless you've run out of content.

This makes the paging experience a little more consistent on mobile -- if you have a staggered last row, it's easy to think there's no more content remaining. I'm also considering making the "more" button have a halo or glow to draw attention to it better.