big array performance issue

[masscrx]

Hi,
I have form for customer information, with three fields which use ui-select, every is for selecting country (country array length is 251) when countries array is loaded for ui-select it causes some lag on the page with this data, I've saw that there are some issues open with pagination for far future so now I can resolve my problem by adding checking for minimum input length for example 3 characters, than pagination is made on backend, but when customer is loaded with such information like $scope.customer.country_id I need to load all countries before, so solution with minium input length for 3 characters can't be applied in that case. Some ideas how to achieve that? I was trying to reduce watchers by adding :: to ui-select's expressions (one time binding - Angular 1.3 feauture) but with no result.

[amcdnl]

You could virtualize the list, only rendering DOM that are in view.

[masscrx]

@amcdnl can you expand your idea? Now my script for counting watchers on the page is showing 3163 watchers (2 fields with ui-select and list of countries) so too too much.

UPDATE: I've reduced by 2000 watchers after remove datepicker from angular-ui packet.

[simkessy]

I could use an answer for this. I'm not sure how to proceed with a list of 14k in my dropdown. I wanted to use minLength but that's not implemented yet.

[masscrx]

@simkessy I've implemented min length in my project, and limit with result, you can check related issue : #274 (comment) where I wrote solution for this. Here you can check how I resolved limit for result : https://gist.github.com/masscrx/3a9ba4b3df4cdd7012ea and in html you can add something like this then:

<ui-select-choices limit="10" refresh="checkCountry($select.search)"  refresh-delay="500" repeat="country as country in countries | filter: $select.search">

This is my workaround for big array till guys make some official functions for this ;-)

[amcdnl]

@masscrx sorry for the delay, busy week.

Virtualizing a list means only the viewable items are rendered in the dom. The other items may be in memory or paged at the server level when came into view.

Heres an example ( would not recommend trying with our select though ) but gives the idea: https://github.com/kamilkp/angular-vs-repeat

[amcdnl]

Tagging as an enhancement; PR's welcome if you want to contribute.

[dmccown1500]

this would be huge. I would not mind working on it at some point but that would require me to not be busy... so not any time soon I think

[maxisam]

+1

[amcdnl]

What about virtual dom like react type implementation?

[dmccown1500]

Interesting that might do the trick. With a react style dom we could have
the list already built and merely injected when the ui-select dropdown
opens.

On a related note I did notice we have a lot of slowdowns that just come
from "ng-if/show"s that are calling a function. I think those have to call
every cycle right?

[Anton-Rodionov]

I also noticed ng-if slows ui-select down when it gets opened, but after quick profiling I found that it's because of ngAnimate, that by default "animates" every ng-if, ng-show, etc. (a lot of requestAnimationFrame calls). When I turned-off ngAnimate for ui-select it became 2x faster.

But this is only if you use ngAnimate, of course.

[dmccown1500]

If this PR #430 could get merged in it would probably solve a lot of the issues as well by limiting the DOM size.

[seiyria]

Any word on virtualizing? This is something that's come up for us as well.