Ember-power-select: very bad performance when rendering array of 250elements

[ivpusic]

I am using component like this:

{{#power-select
  options=countries
  searchField="name"
  placeholder="Click to select country"
  searchPlaceholder="Type to filter..."
  selectedItemComponent="country-badge/selected"
  selected=billingCountry
  onchange=(action (mut billingCountry))
  as |country|
}}
  <img src="/assets/img/country-flags/{{country.code}}.svg" class="icon-flag">
  <span>{{country.name}}</span>
{{/power-select}}

When I click on it, it takes around 1second to show the list. Hovering on different countries is very slow as well. Initial rendering takes around half a second.

Do you have any ideas how can I improve performance, because 250 items should be very fast to render?

[cibernox]

It is somewhat expected that render hundreds of elements takes some time, although 1s seems too much. 300ms took on my tests. Perhaps it's due to the elements being images?
What version of ember are you on? I've noticed that glimmer2 improved render times noticeably.

Generally when I render over 100 elements y prefer to render it empty let users type to filter results. I know it's not an answer but you can workaround the problem and it's probably better UX.

[ivpusic]

I am using latest ember + chrome. Yes, images are slowing down process a little bit, but even when I remove them it is slow.

But anyway, if this is somehow expected behavior on 250elements thank you for your help, I will see what else I can do

[cibernox]

Actually, thanks to this i've discovered that performance degrades when hovering over long lists. At the beginning every hover is a few ms but as i keep overing it stats to be slower and slower until it takes ~200ms.

There is some kind of leakage there. I'll investigate it.

[robclancy]

This is still an issue for us. Luckily only our staff has the lists with lots of items otherwise we would have to look elsewhere.

The dropdown should open close to instant. One possible solution could be the option to have the list always rendered on init but hidden so when opening you just show it which will be instant compared to processing everything when opening.

[cibernox]

@robclancy Your approach also has problems.
In short, you are not making things any faster, just making the slow thing happen on initial render. If opening a dropdown with a few hundred items takes, say, 400ms, and you have 3 selects like that on a form, it will open immediatly but it will slow the render of the form 1200ms because you're rendering all everything upfront, even the options of selects you might never open. This approach also take more memory.

It also kills many useful patterns like avoid lazy-loading the the content of a dropdown until you open it.

In short, the current approach is the only viable option and we can only hope to make it faster. Last week I've detected some sort of leak that I'll track. Whether or not the speed improvement will be noticeble once fixed I can't really tell.

[robclancy]

I can deal with 300ms of slowness in the background of the page, even 4 times. But even 200ms on input is bad for the user. Also this is why I said the option, might not have been clear. But to allow to have the list in the background so when you know it will be better that way you can do it that way.

[robclancy]

Also another thought, if the dropdown opened and said loading (I assume it does this when using a task to load with ajax etc) while it was rendering. Wouldn't solve the issue but would help UX wise.

I could do this myself by making the options a task right?

[cibernox]

Having the list in the background is better in this scenario (hundreds of options), but also much worse other scenarios.

For now the only thing I recommend is keep the number of items in a manageable size, and if it's too big don't display any items and allow users to type. Showing a "Loading" mesage is possible as you mention is possible tho. You have to make the options a promise

I'll work on making the options faster, and ember itself is becoming faster at rendering {{each}}, but I can't give you a time.

[shankarsridhar]

Can ember-power-select use [ember-collection ember-collection to improve the performance and UX ?

[cibernox]

@shankarsridhar It can. I know someone who did it. I created this spike but I don't really have time to finish it: https://github.com/cibernox/ember-power-select-collection

If anyone wants to explore that, please do it as a separate addon tho. In my spike I saw that for lists below a couple docens was actually slower to use ember-collection than just render the list, so I'd prefer to make it an opt-in.