I am attempting to showcase a lineup of { country flags with icons + their names and phone dial codes }. To achieve this in Angular, I have utilized ui-select. Below is the code snippet that I have implemented:
<ui-select ng-model="viewModel.homePhoneCountryCode" theme="bootstrap" id="homePhoneCountryCode" name="homePhoneCountryCode" ng-disabled="disabled">
<ui-select-match>
{{$select.selected.phoneCode}}
</ui-select-match>
<ui-select-choices repeat="country in countries | filter: $select.search">
<img ng-src="{{country.imageUrl}}" />
<span ng-bind-html="country.name | highlight: $select.search"></span>
<span ng-bind-html="country.phoneCode | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
The list appears properly, but there seems to be a performance issue when selecting an option from the list. This lag persists not only on the initial click but also on subsequent clicks, despite the browser caching the images.
With approximately 236 items in the list, the flag icons are sourced from , which have relatively small dimensions.
Another problem arises when text is entered into the search/filter input, causing the page to freeze with a warning indicating a long-running Javascript process.
Question 1: Is this the correct method for displaying remote images in a list?
Question 2: Is there a way to implement lazy loading in ui-select?
Question 3: If the issue lies with ui-select, are there alternative options compatible with Angular that I could explore?