Improving Combobox Performance with Large Data Sets

[markovicb85]

We are using this library in our project, and it has been really great overall. However, I've noticed a performance issue with the Combobox component on some pages.

For example, we use the Combobox to display a collection of skills, which contains more than 200 items. Rendering this Combobox takes approximately 1 to 1.5 seconds. In comparison, using the same scenario with the Radzen library, the rendering takes only about 100 milliseconds. I suspect that Radzen might be using virtualization.

Is there a way to speed up the Combobox rendering in this library? We prefer not to switch to another library because we need to maintain the Fluent UI design.

[dvoituron]

You could use the FluentAutocomplete component. It's more adapted to this cases.

[markovicb85]

Thank you for the quick response.

Yes, I have already tried it, and the performance is significantly better (approximately 10 times faster). However, the design does not meet my needs.

For example:

I need a pre-selected option (this is probably possible, but I haven't tried it yet).
I don't need multiselect (I solved this by setting MaximumSelectedOptions="1").
I'm not sure how to avoid the badge design. It is overkill in my case because I only need to select one item. Is it possible to avoid this using SelectedOptionTemplate? If so, the autocomplete feature would be a good fit.

Additionally, regarding the autocomplete:
Is it possible to wrap the selected option in a new line (currently, it is in one line)? I need this functionality in another part of my app to fit the design.

[markovicb85]

I just noticed the Auto height feature. Forget that I asked the additional question. 😄

[dvoituron]

Yes, you can customize the selected items using SelectedOptionTemplate. And you can set MaximumSelectedOptions="1" with the advantage to display a message when the use try to select another item.

You can take inspiration from the second example (demo/doc site) to develop your project.