[Feature Request]: Add disableOverflow option to PaginationNav to support high page counts

[radarfox]

The problem

We would like to migrate from our custom pagination component to PaginationNav. We have the publications catalogue, that has over 1600 pages. Our custom component has no problems navigating it, but as I'm trying the PaginationNav playground, it looks like it tends to freeze the browser just for thousands of pages. I'm using Chrome 118.

• Setting totalItems: 2500 will freeze my browser for about 5 seconds after the pagination is displayed.
• Setting totalItems: 10000 will freeze my browser for about 45 seconds, during which Chrome warns twice that the page is not responding

The solution

I'm not sure where exactly the problem is, so it's complicated to propose something. I suppose the problem might by in the select associated with "..." button. It lists thousands of items, which is a bit hard to navigate for the user. So, maybe allow to disable the select to prevent this? Or limit the select to some finite number of items? Maybe something like this:

<PaginationNav maxSelectItems={10} />

Examples

https://research.ibm.com/publications

Application/PAL

https://research.ibm.com/

Business priority

Medium Priority = upcoming release but is not pressing

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[tay1orjones]

The performance issue is probably related to this bit of the code and could be rewritten to be more optimized for high page counts:

carbon/packages/react/src/components/PaginationNav/PaginationNav.js

Lines 302 to 318 in 7ef9cb9

	{
	// render items between overflows
	[...Array(totalItems)]
	.map((e, i) => i)
	.slice(startOffset + cuts.front, (1 + cuts.back) * -1)
	.map((item) => (
	<PaginationItem
	key={`item-${item}`}
	page={item + 1}
	translateWithId={t}
	isActive={currentPage === item}
	onClick={() => {
	jumpToItem(item);
	}}
	/>
	))
	}

Also note that Chrome limits the total amount of options inside a select to 10000

[sstrubberg]

Connected to the UX in #15012

[tay1orjones]

Have you seen a valid use case for jumping to a middle page within the overflow select when you have that many (10000+) pages? I ask because one option to eliminate this issue would be to add a new prop to disable the overflow at high page counts, like GitHub does:

The ... is not operable in that screenshot.

[radarfox]

@tay1orjones I have mentioned that problem in the issue description:

I suppose the problem might by in the select associated with "..." button. It lists thousands of items, which is a bit hard to navigate for the user. So, maybe allow to disable the select to prevent this? Or limit the select to some finite number of items?

If you would add a new property like maxSelectItems?: number or disableSelect?: boolean it would solve the problem for us.

[tay1orjones]

@radarfox Yep, we just discussed as a team and agree, adding a disableOverflow prop to allow disabling the overflow (select) is a good option. It should still render the three dots ..., but not be operable.

This will fall lower on our list of priorities so we may not be able to get to it in a timely fashion. If you're keen to contribute this enhancement, we'd so appreciate it! I'm happy to answer any questions to help get you started on a PR, just let me know.