very bad performance when rendering array of 250elements

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]

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.

[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.