Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: pagination on the /monsters top-level page #508

Open
calumbell opened this issue Jun 13, 2024 · 2 comments
Open

Feature: pagination on the /monsters top-level page #508

calumbell opened this issue Jun 13, 2024 · 2 comments
Assignees

Comments

@calumbell
Copy link
Contributor

Loading times on the https://open5e.com/monsters route are currently extremely slow. On a solid internet connection (~200 Mbps) I am observing >4s load times. Taking a look at the debug console, and it looks like this is due to this route requesting every monster in when it loads. Assuming no filters are applied, that is close to 2900 entries in one go!

One solution to this would be to add pagination to this page – chunking the monster list into blocks of 25-50 and then only requesting them when needed. A recent update to our data fetching infrastructure (PR #503) will likely make this fix much, much simpler.

By my reckoning, this fix can be split into three tasks:

  1. Update data fetching composables (useAPI(), etc.) to support pagination. This might involve passing an optional parameter to specify which pages to return.
  2. Update UI so that the user can navigate between pages (UI on /pages/spells/index.vuemight be a good starting point)
  3. Play around with various pagination values (page size, number of pages to load at a time, etc) until the user-experience is smooth.

Once this is fixed, we will likely roll out similar updates to the /spells and /magic-items routes.

NB. While pagination exists on the spells top-level page, this is purely a UI feature. The page still requests every spells in one go, which leads to long load times.

@Sturlen
Copy link
Contributor

Sturlen commented Jul 1, 2024

With the new standard API table component in place, we can use that to implement pagination for all pages that use it. I think is best done through a new usePaginated composable inside the table component that handles all the logic.

@calumbell If you haven't already started work on this, then I'd like to be assigned. Already have a working prototype so it should go pretty smooth.

@calumbell
Copy link
Contributor Author

@Sturlen done!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants