Parcel table infinite scroll #151

New Issue

mpeltriaux · 2022-04-14T15:10:04+02:00

mpeltriaux commented

2022-04-14 15:10:04 +02:00

Status quo

The parcel table contains spatial reference data, e.g. underlying parcels of a geometry. Using htmx, we already run a deferred loading of the parcel table, once the detail view of an entry is loaded.

This has two advantages:

If an entry is newly created, the user has been redirected to the detail view of the new entry and the parcels are being calculated in the background, they can be presented once done, without the need to reload the entire page.
Having hundreds or even thousands of parcels, the server side rendering of such a table would scale up pretty quick, which is not a satisfying UX. The initial loadup of the detail view, using a deferred rendering for the parcels, is much faster, since we do not need to fetch und render the parcel table directly with all other contents -> feels a lot faster and results in better UX

However, there can be geometries having a lot more than just a few hundreds or even a thousand parcels. There might be cases, where users add giant geometries without thinking about the consequences and suddenly a parcel table needs to be loaded, holding 30k and more parcels. Rendering such an amount of data is not just a lot of work for our server but even more work for the client (the browser), which suddenly needs to display a ridiculously big table out of nowhere. The results could be browser freezes or crashes, since it can't handle this data. That would mean the data entry as a whole becomes unviewable for the user (on a weak client device).

Improvement

Htmx provides neat support for 'infinite scrolling', as shown in their example. Using such a dynamic pagination style, we are able to limit the amount of initially rendered parcels in the table to a reasonable size, such as 300. If the user wants to see more, they simply need to scroll and scroll and scroll. For practical usage, it is very unlikely to have a user who even checks a hundred parcels but - who knows!

ToDo

Implement the dynamic pagination according to the provided htmx example for the parcel table.

# Status quo The parcel table contains spatial reference data, e.g. underlying parcels of a geometry. Using htmx, we already run a deferred loading of the parcel table, once the detail view of an entry is loaded. ![grafik](/attachments/acf4f6e3-53df-4c6a-9cee-a22b52822c2b) This has two advantages: 1. If an entry is newly created, the user has been redirected to the detail view of the new entry and the parcels are being calculated in the background, they can be presented once done, without the need to reload the entire page. 1. Having hundreds or even thousands of parcels, the server side rendering of such a table would scale up pretty quick, which is not a satisfying UX. The initial loadup of the detail view, using a deferred rendering for the parcels, is much faster, since we do not need to fetch und render the parcel table directly with all other contents -> feels a lot faster and results in better UX However, there can be geometries having a lot more than just a few hundreds or even a thousand parcels. There might be cases, where users add giant geometries without thinking about the consequences and suddenly a parcel table needs to be loaded, holding 30k and more parcels. Rendering such an amount of data is not just a lot of work for our server but even more work for the client (the browser), which suddenly needs to display a ridiculously big table out of nowhere. The results could be browser freezes or crashes, since it can't handle this data. That would mean the data entry as a whole becomes unviewable for the user (on a weak client device). # Improvement Htmx provides neat support for 'infinite scrolling', as shown [in their example](https://htmx.org/examples/infinite-scroll/). Using such a dynamic pagination style, we are able to limit the amount of initially rendered parcels in the table to a reasonable size, such as 300. If the user wants to see more, they simply need to scroll and scroll and scroll. For practical usage, it is very unlikely to have a user who even checks a hundred parcels but - who knows! ## ToDo Implement the dynamic pagination according to the provided htmx example for the parcel table.

grafik.png

34 KiB

mpeltriaux added the

enhancement

label 2022-04-14 15:10:08 +02:00

mpeltriaux self-assigned this 2022-04-14 15:10:11 +02:00

mpeltriaux referenced this issue from a commit

2022-04-21 14:37:05 +02:00

#151 Dynamic parcel table

mpeltriaux referenced this issue from a commit

2022-04-21 14:37:05 +02:00

#151 Parcel table infinite scroll