Implement pagination for `MapDashboard`

[rudokemper]

As map requests start to add up on a MapPacker instance, it will be good to add pagination to the MapDashboard component. Let's start with 6 requests per page.

[IamJeffG]

I recommend not using OFFSET but rather a keyset-based cursor. i.e. option 2 from this link: https://www.geeksforgeeks.org/what-are-different-methods-to-do-pagination-in-postgresql/

(That link does a terrible job of distinguishing between 2 and 3 but my main point is to just do not use 1)

Your cursor column could be the datetime or the primary key on the table; presumably those two are highly correlated.

[IamJeffG]

I think I intuited from an offline conversation that the motivation here is not about the database (it's fine, for now, to pull all past maps into the clientside app) but rather about generating thumbnail images for all of them at once.

A very simple workaround for that, without needing to add pagination, is the <img loading="lazy" /> attribute: it will defer requesting image files from the server until it's about to inter the viewport, e.g. from user scrolling. It has wide browser support and I've used it with great success in other projects.

Also my minor opinion: If you do go down the pagination road, I still encourage you to use keyset pagination, even if you are keeping pagination 100% within the frontend. The reason is that the choice of how you paginate today is going to be reflected in the URL, and that URL is going to be what determines how you are able to (one day far in the future) paginate all the way to the database. For example if today you decide to implement client-only pagination using ?page=2, it's sort of tying your hands when you do need to paginate at the database; you would need to break your URLs when your pagination at the database will require the URL to look like ?before=«timestamp». Probably not a big deal (now or then), but I find it's a nice & easy pattern to establish early.

[rudokemper]

Thanks @IamJeffG for your input here. A forthcoming PR that I will open shortly actually adopts database pagination together with lazy loading based on scrolling (in a different way than your suggested workaround, because the objects with a heavy payload are static Mapbox GL maps, not images, so the loading attribute does not work there).