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

Add Pagination to front-end #775

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Conversation

glubsy
Copy link

@glubsy glubsy commented Jan 14, 2021

  • Adds pagination buttons at the bottom of the page when the number of
    items to be displayed is greater than the selected preference.
  • Add a selector to the side bar for users to select their preferred
    number of items to be displayed at once per page.
  • Sorting should be handled by the pagination module whenever it keeps
    the list of items in memory.
  • Pagination is hidden (buttons are removed) whenever there is no need
    for it, or when the user selected to display everything.
  • This should significantly improve performance on the client side for directories listing hundreds or thousands of items.

Closes #283.

* Add pagination buttons at the bottom of the page when the number of
items to be displayed is greater than the selected preference.
* Add a selector to the side bar for users to select their prefered
number of items to be displayed at once per page.
* Sorting should be handled by the pagination module whenever it keeps
the list of items in memory.
* Pagination is hidden (buttons are removed) whenever there is no need
for it, or when the user selected to display everything.
The Pagination module introduced some new strings.
@glubsy
Copy link
Author

glubsy commented Jan 14, 2021

A few notes on these patches:

  • Basically we hook whenever items to be displayed are changed, which is why we reuse some code from the View module and make detours in it.
  • Page refresh (with the refresh option) should be handled just fine, as well as sorting.
  • The code is not the most elegant at times, but I tried to keep it as readable and maintainable as possible.
  • At first I opted to make a singleton object for the pagination, but for readability purposes changed to simply keep it as a module with some global variables.
  • A history of the (now squashed) commits can be found here.
  • Translation files have been updated in the process.

Here is what it looks like:
2021-01-14_20-11-09

You may notice it hovers above the list of displayed items.

@kuzdogan
Copy link

kuzdogan commented Oct 11, 2021

Is it likely this will be merged sometime soon? We really need this for https://repo.sourcify.dev Kudos to @glubsy 👏

@kuzdogan
Copy link

I tried checking out these commits and #771 but unfortunately it didn't get any faster

To try out I created a directory with 20k folders, similar to our own setting with:

mkdir test-{1..20000}

The UI still hangs a long time when entering the parent directory of these 20k directories. Is it the mounting of the directory that is really slow?

@glubsy
Copy link
Author

glubsy commented Oct 11, 2021

It's been a little while since I worked on this, but the other commit you mentioned simply removes the loading of items from the parent directories. The children directories are loaded just like before.

There is no lazy loading here, all the child items are still loaded at once.

I don't think it would be possible to implement lazy loading without removing the various sort buttons. You would also lose the ability to get the total number of child items per directory (until you have loaded them all), and the total number of pages would be incremented as you load the next pages. This would also need to be implemented on the back-end side, not just front-end.

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

Successfully merging this pull request may close these issues.

Dynamic load of large directories
2 participants