I have a page with some tabs and each tab has large amount of angularjs bindings.This is sample page where i am facing issue.Each tabs take about 10 seconds to render.
So i planned to give a loading spinner while tab renders.
So i planned to show loading spinner during click on the tab and remove the spinner at the end($last) of the ng-repeat.
In the ng-click on tab i activated the spinning loader
<ul>
<li ng-repeat=tab in tabs
ng-class={active:isActiveTab(tab.url)}
ng-click=onClickTab(tab)>{{tab.title}}
</li>
</ul>
In controller
$scope.onClickTab = function (tab) {
showLoader();
$scope.currentTab = tab.url;
}
To check ng-repeat is complete i have used below directive
.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
});
}
}
}
});
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
removeLoader();
});
showLoader and removeLoader are simple function which append and remove the div having a simple loading spinner.
function showLoader() {
$('body').append('<div class=loader></div>');
}
function removeLoader() {
$('.loader').fadeOut(function () {
$(this).remove();
});
}
Expected result: Spinning loader to be shown when clicked on tab and appear till ng-repeat finishes.(i.e the clicked tab renders completely)
Actual result: The loader is not shown when clicked on tab and it appear almost at the end of ng-repaet and appear for a fraction of seconds. Here you can observe the said behavior. I think the page is not able to show the spinner due to the angular bindings process which makes page freeze.
Can anyone help me to resolve this?
