Ember-power-select: Performance issues when dealing with large datasets

[kybishop]

Since #775 is closed, I wanted to open a separate issue as a POC for dealing with large datasets.

As it stands, a dropdown for moment.tz.names() (about 590 items) takes > 5 seconds to render on my MacBook, and the eventual dropdown has performance issues that prevent it from being of much use (scrolling, hover effects, and typing in the search box are very laggy).

Constraining results via the navigable-selects cookbook or by only showing results from a user-search are reasonable workarounds for now.

[cibernox]

What I do in those cases is to show, say, 50, and allow users to search for more results.

I'd like someone to explore a variation of ember-power-select that uses smoke-and-mirrors to render an infinite list, but I don't have time myself for that. That would fix this problem.

However, 5s is a lot. Is that in production? For me ~600 items takes less than 2 seconds in production (still too much, but 5s is the time I'd expect for 1500 items)

[kybishop]

Didn't realize going to prod would make such a drastic difference; I'm at < 1s to render with a workable dropdown.

I still might spike the Smoke & Mirrors implementation to improve performance on mobile.

[cibernox]

Yeah, production can be several times faster sometimes. I did spike this briefly using ember-collection once, but it was just a 1h spike to prove that it was doable: https://github.com/cibernox/ember-power-select-collection

You could use that for inspiration.

[luketheobscure]

FWIW, performance is very different if the inspector is open. I can't tell you how many times I was troubleshooting a perceived performance issue that magically went away when I closed the inspector.