How to display loading popup before template

1

Hello community!

I’d like to display a loading popup before to render the template, si I’ve try something like that :
showWaiting own an argument to define how many event are pending
hideWaiting hide the loader if the is no more pending event

So in this example, I’m waiting for 2 events : Get the data from WS AND waiting for DOM

Controler :

    $scope.showWaiting = function(inc) {
    $scope.inc = inc;
    $ionicLoading.show({
        template: '<ion-spinner icon="lines" class="spinner-balanced"></ion-spinner><br>Chargement...'
    });
};
$scope.hideWaiting = function() {
    $scope.inc--;
    if ($scope.inc === 0) {
        $ionicLoading.hide();
    }
};


$scope.$on('$ionicView.beforeEnter', function() {
    $scope.showWaiting(2);
    
        WSService.getData().success(function(data) {
            $scope.hideWaiting();
        });
    
    ionic.DomUtil.ready(function() {
            $scope.hideWaiting();
    });
});

But in my menu when I click on the corresponding page, I see the following steps :

  • Menu close
  • View is visible
  • Loading appear
  • Loading close
  • View is visible

I’d like not to see the view before the loading, do you have an idea to do so? :grimacing:

EDIT : Cache is disabled in this view

2

If view cache disabled you can show your loading overlay directly, when the your controller is loaded and nesting the two asny-parts to hide it correctly (in other cases please use promises instead of building ugly functions with increments and decrements:

app.controller('myController', [
  '$scope',
  '$ionicLoading',
  'WSService',
  function ($scope, $ionicLoading, WSService) {
    $ionicLoading.show({
      template: '...'
    });
    
   $scope.$on('$ionicView.beforeEnter', function () {
     ionic.DomUtil.ready(function () {
       WSService.getData().success(function(data) {
         $ionicLoading.hide();
       }, function () {
         // do not forget the errorcase!
         $ionicLoading.hide();
       });
     });
   });
]);

with promises:

app.controller('myController', [
  '$scope',
  '$q',
  '$ionicLoading',
  'WSService',
  function ($scope, $q, $ionicLoading, WSService) {

    $ionicLoading.show({
      template: '...'
    });
    // wrap DomUtil.ready in promise context
   function ready() {
     var deferred = $q.defer();
     ionic.DomUtil.ready(function () {
       q.resolve();
     });
     return deferred.promise;
   }
    
   $scope.$on('$ionicView.beforeEnter', function () {
     var myAsyncTasks = [];
     // add promise-functions to Array
     myAsyncTasks.push(ready());
     // $http-requests returning promises by default!
     myAsyncTasks.push(WSService.getData());
     
     // try to successfully fullfil all promises in promise-array
     $q.all(myAsyncTasks).then(function (results) {
       // success -> results contains an array of the results of each function!
       $ionicLoading.hide();
     }, function (results) {
       // do not forget the errorcase! -> the result of the first failing promise
       $ionicLoading.hide();
     });
  });
]);