Skip to content

Conversation

Mil4n0r
Copy link
Collaborator

@Mil4n0r Mil4n0r commented Jun 12, 2025

Checklist
(Check off all the items before submitting)

  • Build process is done without errors. All tests pass in the /lib directory.
  • Self-reviewed the code before submitting.
  • Meets accessibility standards.
  • Added/updated documentation to /website as needed.
  • Added/updated tests as needed.

Our select was not behaving properly with huge datasets due to performance issues (overloading the DOM and doing data processing).

In order to get around that problem, there is a common strategy, virtualization, which allows the component to load only a few items at once and update that list of items each time an user scrolls over it.

I have implemented it using virtuoso, one of the highest performance libraries out there that remains up to date and can achieve all the common use cases for these kind of strategies.

The work is still in progress, however, there are a few limitations that we have to take into account:

  • In order to achieve virtualization, we need a FIXED height for the component, I am currently using an arbitrary value but we should discuss the best approach.
  • The scroll works flawlessly for normal selects, even using the keyboard! However, for groups it's not the same and some refactor has yet to be done for it to work as expected when scrolling through keyboard. The critical methods that have to be reimplemented are marked as // TODO in the code.
  • This is an important update not only because of being able to use the Select with datasets with more than 10k items, but because also other of our components depend on it, such as the DxcPaginator menus, which don't allow switching pages smoothly when there is a big amount of them.
  • There is another PR which is ready to review which applies virtualization to the DxcResultsetTable component with a simpler logic which could be useful to understand how virtuoso works in an easier way.

@Mil4n0r Mil4n0r marked this pull request as ready for review July 17, 2025 12:32
@Mil4n0r
Copy link
Collaborator Author

Mil4n0r commented Jul 17, 2025

Some quick notes:

  • In order to fix [DxcPaginator] Paginator select becomes unresponsive when number of pages is too large #2220 , we need to make a decision on whether we want to use the virtualized variant always for paginator or we want it to depend on the amount of pages available to select.
  • I encountered a problem when trying to add unit testing for virtualized select using Jest. For some reason the listbox is not displayed "in time" so the options are not accessible, I tried adding a timeout or using the findBy over the getBy with no success. @Jialecl could you check it?

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.

1 participant