javascript - Angularjs tab Loading spinner while rendering -

i have page tabs , each tab has large amount of angularjs bindings.this sample page facing issue.each tabs take 10 seconds render.

so planned give loading spinner while tab renders. planned show loading spinner during click on tab , remove spinner @ end($last) of ng-repeat.

in ng-click on tab activated 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 complete 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 , removeloader simple function append , remove div having simple loading spinner.

function showloader() {     $('body').append('<div class="loader"></div>'); }  function removeloader() {     $('.loader').fadeout(function () {         $(this).remove();     }); } 

expected result: spinning loader shown when clicked on tab , appear till ng-repeat finishes.(i.e clicked tab renders completely)

actual result: loader not shown when clicked on tab , appear @ end of ng-repaet , appear fraction of seconds. here can observe said behavior. think page not able show spinner due angular bindings process makes page freeze.

can me resolve this?

you can change code this:

$timeout(function() {   $scope.currenttab = tab.url  }, 100); 

demo: http://jsfiddle.net/ergt8/1053/

what is, push currenttab change next digest cycle. (it's kind of hack, not solution proud of.) therefore, in first digest cycle (before $timeout invoked) loading shown. in next digest cycle, blocking ng-repeat stuff starts working since make loading visible previously, appears.

:)

this solves problem, running long running , blocking javascript hangs browser not user experience. also, since browser hang completely, loading gif not animate, visible.