0

I know there's a lot written about this, but I can't find a solution to this particular problem. When changing a state, I want the current state to be hidden and for the spinner to be displayed on $stateChangeStart, and for the spinner to be hidden when the new state is resolved on $stateChangeSuccess. Currently, I'm dealing with this by setting showSpinner value to true/false in the $rootScope where it is being reflected in the views, like so...

    $rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams){
        $rootScope.showSpinner = true;
    })

    $rootScope.$on('$stateChangeSuccess', function(e, toState, toParams, fromState, fromParams){
        $rootScope.showSpinner = false;
    })

Views:

<div class="spinner" ng-if="showSpinner"></div>
<div ng-if="!showSpinner" ng-show="$state.includes('rulebook.text-view')" ui-view="text-view"></div>
<div ng-if="!showSpinner" ng-show="$state.includes('rulebook.rules')" ui-view="rules"></div>
<div ng-if="!showSpinner" ng-show="$state.includes('rulebook.vocab')" ui-view="vocab"></div>

As of now $stateChangeStart is doing what I want, but there is a good delay in removing the spinner after the new view has been resolved on $stateChangeSuccess and the content has been rendered. Can't really figure why this is happening. I would appreciate any help.

hughesjmh
  • 2,133
  • 2
  • 11
  • 11

1 Answers1

0

Did you try $viewContentLoaded event mentioned in angular router user guide?

Ibrahim Mumcu
  • 243
  • 2
  • 11
  • Thanks for the response. I'm not sure what you mean exactly, but I've tried working with $viewContextLoaded. The event is firing. I've tried placing $rootScope.showSpinner=false inside that event and removing $stateChangeSuccess. This prevents the event from firing (the spinner keeps spinning). – hughesjmh Jan 06 '16 at 14:16