The following code snippet is from my controller:
PartnersService.GetNonPartnerBanks().success(function (data) {
vm.nonPartnerBanksList = data;
}).error( function () {
vm.nonPartnerBanksList = [];
});
This code calls the service shown below:
service.GetNonPartnerBanks = function() {
var nonPartnerBankUrl = config.baseUrl + 'public/nonPartnerBanks';
return $http.get(nonPartnerBankUrl);
};
Everything functions as expected, however, if the server response takes too long, the application's user interface freezes.
I am puzzled - doesn't the $http service utilize AJAX and promises to allow the UI rendering to continue while the call is in progress?
Below is the part of the template that utilizes the retrieved data:
<ol class="nya-bs-select nya-dashboard"
required
name="futurePartner"
id="futurePartner"
ng-model="npc.futurePartner"
data-size="5"
ng-change="npc.hideSucessMessage()"
title-tpl="<span>{{npc.partnerSelectTitle}}</span>"
deep-watch="true"
no-search-title-tpl="<span>{{'general.NoSearchResult' | translate}}</span>"
data-live-search="true">
<li nya-bs-option="bankItem in npc.futurePartnerList" data-value="bankItem.id">
<a>
{{bankItem.name}}
</a>
</li>
</ol>
Update:
After reviewing Vita's explanation, I realized that it wasn't $http causing my UI to hang. The issue was actually due to an animation on ajax calls giving the impression of a frozen UI.