UPDATE: I have discovered a simpler solution that has been tested and works smoothly:

Within my primary controller, I have implemented the following code:

$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 directive displays the spinner when transitioning to a state with unresolved components and hides it once the transition is complete. Although you may need to consider checking up the state hierarchy as well (i.e., displaying the spinner when loading a parent state with resolved elements), this approach suits my needs perfectly.

For reference and as an alternative, here is my previous suggestion:

1. In your application's controller, monitor the stateChangeStart event to determine if there is a need to display a spinner during resolution (refer to 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();  //a custom function to show the loading animation
       }
   })
   

2. Once the controller is activated, hide the spinner accordingly

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

You may also want to account for any resolve errors by listening for the $stateChangeError event and handling them while concealing the animation.

Distributing the spinner's logic across controllers isn't the most organized approach, but it remains a viable method. I trust this information proves beneficial to you.

Here is my solution that has been working flawlessly for me:

1. Implement the following code in your app.run function

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. Position the loading indicator right above the ui-view section. Ensure that the div containing ui-view has id="ui-view".

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

3. Include the following CSS in your stylesheet

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

NOTE:

A. The provided code will display the loading indicator in two scenarios 1) during the initial load of the angular app 2) when transitioning between views.

B. To prevent the indicator from showing during the initial app load (before any view is loaded), simply add the hidden class to the loading div as demonstrated below

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

In my experience, the angular-loading-bar has proven to be highly effective for handling lengthy resolves caused by network connectivity.

Consider incorporating dynamic content into the div that will be populated by ui-router upon resolution of the properties.

In your index.html

<div ui-view class="container">
    Loading....
</div>

Users will initially see "Loading..." while the properties are being resolved. Once everything is set, ui-router will replace the loading message with the actual content of your application.

Whenever there are pending requests with $http, I display an animated gif.

Within my base page template, I have a navbar and a corresponding controller. The excerpt from the controller is as follows:

controllers.controller('NavbarCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $scope.hasPendingRequests = function () {
            return $http.pendingRequests.length > 0;
        };
    }]);

The relevant code in the HTML document looks like this:

<span class="navbar-spinner" ng-show="hasPendingRequests()">
    <img src="/static/img/spinner.gif">
</span>

I trust this information proves to be beneficial!

My concept involves traversing the state graph between changing states during the $stateChangeStart event and identifying all views that are affected. Each ui-view directive then monitors whether its corresponding view is part of the transition and applies a 'ui-resolving' class to its element.

In the demonstration provided in this plunker, there are two root states: first and second. The state second has two child states, second.sub1 and second.sub2. Additionally, the state second.sub2 targets the footer view associated with its parent state.

This code snippet is used as a loader for the entire application when navigating between different states or pages. It should be placed in the app.js file.

.run(
    ['$rootScope',
        function($rootScope) {
            $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
                $rootScope.preloader = true;
            })
            $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
                $rootScope.preloader = false;
            })
        }
    ])

In html:

<div ng-show="preloader">Loading...</div>

Deprecated methods like $stateChangeStart have now been replaced by Transition Hooks. Here is an updated version provided by Stefan Henze:

$transitions.onStart({}, function(transition) {
  if (transition.to().resolve) {
    $scope.showSpinner();
  }
});

$transitions.onSuccess({}, function(transition) {
  if (transition.to().resolve) {
    $scope.hideSpinner();
  }
});

You can implement this in your parent controller. Make sure to inject $transitions -

.controller('parentController',['$transitions',function($transitions){...}]);

Keep in mind that even an empty object as a resolve will be considered true, so avoid leaving blank placeholders in the state declaration.

I find it beneficial to utilize a directive for handling any loading tasks, as it helps maintain the cleanliness of my codebase.

angular.module('$loadingUtilities', [])
.directive('loaderManager',['$timeout','$rootScope', function($timeout, $rootScope) {
    return {
      restrict: 'A',
      template: '<div id="oneloader" class="hiddenload">loading...</div>',
      replace: true,
      compile: function (scope, element, attrs) {
        $timeout(function(){
          $rootScope
              .$on('$stateChangeStart',
                  function(event, toState, toParams, fromState, fromParams){
                      $("#oneloader").removeClass("hiddenload");
              });

          $rootScope
              .$on('$stateChangeSuccess',
                  function(event, toState, toParams, fromState, fromParams){
                      //introduce a slight delay
                      $timeout(function(){
                        $("#oneloader").addClass("hiddenload");
                      },500)
              });
        }, 0);
      }
    }
  }]);

Implementing a view with resolve in the router has greatly improved my application's performance. Give it a try!

//update index.html file 
<ion-nav-view>
    <div ng-show="loader" class="loadingSvg">
        <div class="svgImage"></div>
    </div>
</ion-nav-view>

// styles.css file

.loadingSvg {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 99;
    left: 0;
    right: 0;
}

.svgImage {
    background: url(../img/default.svg) no-repeat;
    position: relative;
    z-index: 99;
    height: 65px;
    width: 65px;
    background-size: 56px;
    top: 50%;
    margin: 0 auto;
}

// update app.js

 .run(function($ionicPush, $rootScope, $ionicPlatform) {




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

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

});

If you are utilizing ngRoute, awaiting the completion of resolve before transitioning to the next view, and integrating angular-bootstrap-ui for UI components, you can implement the following solution:

app.config([
  "$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
    return $routeProvider.when("/seasons/:seasonId", {
      templateUrl: "season-manage.html",
      controller: "SeasonManageController",
      resolve: {
        season: [
          "$route", "$q", "$http", "$modal", function($route, $q, $http, $modal) {
            var modal, promise, seasonId;
            modal = $modal.open({
              backdrop: "static",
              template: "<div>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title\">\n      Loading...\n    </h3>\n  </div>\n  <div class=\"modal-body\">\n    <progressbar\n      class=\"progress-striped active\"\n      value=\"'100'\">\n    </progressbar>\n  </div>\n</div>",
              keyboard: false,
              size: "lg"
            });
            promise = $q.defer();
            seasonId = $route.current.params.seasonId;
            $http.get("/api/match/seasons/" + seasonId).success(function(data) {
              modal.close();
              promise.resolve(data);
            }).error(function(data) {
              modal.close();
              promise.reject(data);
            });

            return promise.promise;
          }
        ]
      }
    });
  }
]);