clay

clay copied to clipboard

When having a lot of pages, the pagination component create links to some of the pages

For example, when having 100 pages, we would have something like this:

When clicking on the ellipsis button, a dropdown appears allowing the user to select a specific page.

This may be fine when having a low number of pages, but in this case for example, the right ellipsis will show a dropdown of 90 items, and having more pages will result in a higher dropdown that will cause performance problem due to React having to render all that items

Is there an example you can provide via codesandbox.com?

Here: https://codesandbox.io/s/falling-river-3t2i9?file=/src/index.js:257-285

you can change the total pages value

What are the steps to reproduce?

• Adding any pagination component
• Set a high number of pages

What is the expected result?

Having a lot of pages shouldn't result in the pagination component creating a dropdown with a link to all the pages

Environment

Tech	Version
Clay	v3.40.0
React	v16.12.0

Talked with @julien about these, we may just simply limit the number of items in the dropdown with a prop, but this will probably require some analysis by lexicon.

I have checked lexicon site but it doesn't seems to specify anything for these cases.

@drakonux what do you think?

@victorg1991 thanks for opening this - that's definitely a problem (and an interesting example).

As you said, we might need help from design to help us solve this, but we should also think about what to do with the component. As you said during our call, maybe the team using the component should limit the number of items they pass in, but there's probably something else we need to do internally.

I've checked again and I don't think we can do anything without changing something in clay. Do you think we can add the aforementioned prop to limit that number? This way we can fix it the problem and design can think of a better way to handle this :)

@victorg1991 If you have an idea of how to solve this, please feel free to submit a pull request - If @matuzalemsteles has a better idea, he will comment and we can talk about alternative options.

oh, this is an interesting case, I hadn't thought about these possibilities within DropDown. I didn't quite understand how this limit would work, in that case, we would define a limit for the number of items inside the DropDown but would it appear in the pagination?

I see a good opportunity here for us to use list virtualization, maybe not in all DropDown cases because it can have groupings and we would need to deal with it better, but for cases like pagination which is a consistent list it would be possible to add this, we can try to use the library react-window to not make an implementation from scratch.

I don't know what answer to this. I would need to review the old docs about it.

But my first thought would be that if the number of pages increases the time-response, the component should give feedback because the system is working (using a loading indicator replacing the ellipsis meanwhile, for example).

We can work on other alternatives to study @victorg1991 open us a ticket if you want.

What is the number of supported pages until the experience starts to be worse?

oh, this is an interesting case, I hadn't thought about these possibilities within DropDown. I didn't quite understand how this limit would work, in that case, we would define a limit for the number of items inside the DropDown but would it appear in the pagination?

@matuzalemsteles I was thinking a very naive approach, we could select something like ellipsisPageDelta (name TBD) and for example if he have 1000 pages and we set a delta of 10, the pagination would like 1, 2, 3 ... 1000 and the dropdown for the ellipsis would show 10 pages for each interval, in this case pages (3-13 and 989-999). Others won't be accessible.

I see a good opportunity here for us to use list virtualization, maybe not in all DropDown cases because it can have groupings and we would need to deal with it better, but for cases like pagination which is a consistent list it would be possible to add this, we can try to use the library react-window to not make an implementation from scratch.

That would definitely solve the performance problem, but do we want to show a dropdown with 1000+ items, just to specifically choose a page? Maybe there is a better alternative that doesn't require show that many items, right? 🤔

I don't know what answer to this. I would need to review the old docs about it.

But my first thought would be that if the number of pages increases the time-response, the component should give feedback because the system is working (using a loading indicator replacing the ellipsis meanwhile, for example).

Hey @drakonux, The problem is that React takes a lot of time to render that many items, since this happens synchronously in the ui, we cannot show any progress for that 😢.

We can work on other alternatives to study @victorg1991 open us a ticket if you want.

What is the number of supported pages until the experience starts to be worse?

We don't have an exact number, but we did a test with 33k pages and it worked pretty badly

I'll open a ticket for that, thanks David :)

I was thinking a very naive approach, we could select something like ellipsisPageDelta (name TBD) and for example if he have 1000 pages and we set a delta of 10, the pagination would like 1, 2, 3 ... 1000 and the dropdown for the ellipsis would show 10 pages for each interval, in this case pages (3-13 and 989-999). Others won't be accessible.

I think that would be an option too but I'm not sure if this would be seen as a bug by the user 😕

That would definitely solve the performance problem, but do we want to show a dropdown with 1000+ items, just to specifically choose a page? Maybe there is a better alternative that doesn't require show that many items, right? 🤔

Yeah, that's a good question, but I don't know exactly if it's something users can do too, I think we need a UX test to check these cases and better understand what to do here.

I've opened https://issues.liferay.com/browse/LEXI-1279 for lexicon to revise it

In the mean time, what do you think about being able to disable this dropdown using a prop? 🤔

In the mean time, what do you think about being able to disable this dropdown using a prop? thinking

I think that's not a bad idea at all @victorg1991, I'd say "go for it".

LPS Ticket https://liferay.atlassian.net/browse/LPS-190535