adeo / mozaic-design-system

Mozaic Design System
https://mozaic.adeo.cloud
Apache License 2.0
69 stars 17 forks source link

Performance issues on DatatableV2 (Pagination) #1497

Closed vqoph closed 5 months ago

vqoph commented 9 months ago

I am opening an issue for

Component

Package version

@mozaic-ds/vue-3

Description

When using the datatableV2 with a lot of pages (more than 1000) we can encounter slowing of datatable refresh and interactions (especially with devtools)

I suspect the Pagination component, that generate the totality of pages as option marks on the select, this cause browser calculation that can cause this performance issue.

image

a possible solution is to generate just a partial list of page in the select field.

GitHub repository

No response

Mock-up(s)

No response

What happened?

No response

What is expected?

No response

To Reproduce

Load a datatableV2 with quick responding xhr and a lot of pages (more than 1000)

Code example

No response

Is this a regression?

Additional comments

No response

tiloyi commented 5 months ago

Hi @vqoph , Thank you for your request.

The performance problem you are experiencing is caused by the large number of options created by the browser in the Select pagination.

To fix this you just need to use the showPartialPages prop.

This will display only the 3 pages preceding & following the current page.

So I'm closing this exit. Don't hesitate to open it again if you need to.