(Angular-ui-router) Show loading animation during resolve process

EDIT: Here is an even easier solution, tested and working nicely:

In my main controller I simply have

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {    if (toState.resolve) {        $scope.showSpinner();    }});$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {    if (toState.resolve) {        $scope.hideSpinner();    }});

This shows the spinner whenever we are about to go to a state that has anything to resolve and hides it, when the state change is complete. You might want to add some check up the state hierarchy (i.e. also show the spinner if a parent state that is being loaded resolves something) but this solution works fine for me.

Here is my old suggestion for reference and as an alternative:

1. In your application controller, listen to the stateChangeStart event and check if you are about to switch to a state where you want to show a spinner during resolve (see https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-events-1)

   $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){    if (toState.name == 'state.with.resolve') {        $scope.showSpinner();  //this is a function you created to show the loading animation    }})

2. When you controller finally gets called, you can hide the spinner

   .controller('StateWithResolveCtrl', function($scope) {    $scope.hideSpinner();})

You also might want to check for any errors that may have occurred during resolve by listening to the $stateChangeError event and hiding the animation while you handle the error.

This is not totally clean as you distribute the logic for the spinner between controllers, but it's a way. Hope it helps.

I developed the following solution which works perfectly for me.

1. Add the following app.run

app.run(function($rootScope){    $rootScope        .$on('$stateChangeStart',             function(event, toState, toParams, fromState, fromParams){                 $("#ui-view").html("");                $(".page-loading").removeClass("hidden");        });    $rootScope        .$on('$stateChangeSuccess',            function(event, toState, toParams, fromState, fromParams){                 $(".page-loading").addClass("hidden");        });});

2. Place the loading indicator just above the ui-view. Add id="ui-view" to ui-view div.

<div class="page-loading">Loading...</div><div ui-view id="ui-view"></div>

3. add the following to your css

.hidden {  display: none !important;  visibility: hidden !important;}

NOTE:

A. The above code will display loading indicator in two cases 1) when the angular app is loaded first time 2) when the view is changed.

B. If you don't want the indicator to be shown when the angular app loads first time (before any view is loaded), then add hidden class to the loading div like below

<div class="page-loading hidden">Loading...</div>

I've found using the angular-loading-bar worked really well for long resolves due to network access.