I have 10 to 15 Ember Select components (drop down) in a form, each have elements varies from 1 to 10000 and more. Some of the drop downs are depended (for example, country and state). User selects value from available values in the component.
It takes more time (depends on the data) to load the form.
How can i tune the performance? Or Can i achieve this in different way by avoiding select component.
That’s a known issue in ember. Refer this thread. The core team is working on rebuilding the Ember Select as a component.
A better work around would be load the data on click with some smooth loading effect
1 Like
You are telling like i want to create custom element and load data on click (without binding). jQuery way. Am i right ?
@susai You can go for auto-complete widgets instead of relying on Em.Select and hacking around for large data sets
Take a look at Addepar | Open Source
1 Like
In playing with what a proper replacement for Ember.Select will look like, I created this to “solve” the speed issue (renders a 400 item list in < 3ms):
6 Likes
@SelvaG . Ember Select widget takes more time if i load entire data initially (~15000). I guess i want to implement lazy loading behaviour here.
I don’t think lazy load behaviour implemented in Ember Select widget. I may wrong but i couldn’t find proper documentation about this.
I guess i could develop my own select component with lazy load using Ember List View, but unfortunately i couldn’t understand the demo provided by them.
Is there any examples, widgets developed in Ember that provide select component with lazy loading behaviour?
@rwjblue: Nice work, but if i load data (~15000) it takes more time (~30 - 40 sec). I planned to move with lazy load
You would have to benchmark, but I imagine that generating native select (completely outside of Ember) with 15000 items would be fairly non-performant.
1 Like
Damn, 15000 entries? Even if you could do that performantly, is that select box even usable with that many entries? The UX designer in me thinks you might need something else entirely…
Yes, its not wise to load huge amount of data initially. I consider lazy loading of data on scroll along with autocomplete.
I found Addepar Ember Select widget useful, but i am not sure lazy loading behaviour implemented in it.
@matthooks: KIndly suggest me if you have better idea. User need to choose 1 entry from huge set of entries.
@rwjblue: I tried to change no.of objects to 15000 in complexSelectContent. It shows 2.41ms. But the jsbin is not responding for more than two minutes.
The JSBin I linked renders both an original Ember.Select and this custom one so that you can compare the times. I’d you remove the Ember.Select you will see much better render times in that JSBin…
1 Like
If the user knows which item they’re looking for and just needs to select it from a list, I would use a text input hooked up to a full-text search as a way to produce a (much) smaller subset of the original list and let the user pick from that, either via a select input or a styled html list.
However, if the user doesn’t know what they are selecting until they’ve seen it in a list or if many of the results have similar text, then a select input may be your best/only bet.
That said – @rwjblue’s faster select input looks like it might take care of your problem either way. Nice work.
2 Likes
Hi,
Was there any progress on this issue? Ember.Select is still damn slow for typical use case like a countries list.