IonicLoading doesn't hide on startup

I’m having trouble with the IonicLoading (I’m using the nightly build).
The first time I open my app, the loading popup doesn’t disappear (most of the times however, I can still use the app, and if I pull to refresh, the loading popup disappears).
However, this is only the case when I test it in a browser (chrome or safari, doesn’t matter) on an iPhone, when I test it in chrome on my dekstop with iPad emulation, it works just fine.

This is my code:

$scope.show = function () {
    $ionicLoading.show({
        template: 'Loading...'
    });
};

$scope.getLabRequests = function () {
        $scope.show();
        overzichtService.query(function (res) {
            $scope.labrequests = [];
            $scope.labrequests = _.map(_.sortBy(res, function (item) {
                return item.patient.lastName;
            }));
            $ionicLoading.hide();
            $scope.$broadcast('scroll.refreshComplete');
        }, function (result) {
            //on fail
            $ionicLoading.hide();
        })
    };

$scope.getLabRequests();

Any thoughts?

Edit: sometimes (1 or 2 in 10 times) it doesn’t hide when I pull to refresh neither. So it’s not only when it starts up.

When I use ionicLoading, I usually call the hide() method on a specific instance of ionicLoading (like the instance you instantiated when you passed in the options object with template). (Side note: I think you want the ‘content’ property of that options object, not ‘template’). You also need to return that instance to assign it as a value. Here’s a little example that uses a timeout to remove the loading screen:

$scope.show = function () {
  return $ionicLoading.show({
    content: 'Loading...'
  });
};

$scope.getLabRequests = function () {
    var loading = $scope.show();
    $timeout(function(){
      loading.hide();
    }, 5000);
  };

$scope.getLabRequests();

Continuing the discussion from IonicLoading doens’t hide on startup:

Thanks for the help, but when I try this I get the following error:

$ionicLoading instance.hide() has been deprecated. Use $ionicLoading.hide(). 

But it does work on iPhone. However i’m not sure if I should use it with the error.
When I use $ionicLoading.hide() it doesn’t work anymore.

About the content/template: the docs say that you should use template in the new nightly.

Try doing it like this :

.controller('MyCtrl', function($scope, $ionicLoading, $timeout) {
  $scope.myTitle = 'Loading Sample';
  
  $scope.loadingIndicator;
  
  $scope.loadData = function() {
    
    $scope.loadingIndicator = $ionicLoading.show({
            content: 'Showing Loading Indicator!'
        }); 
    
    $timeout(function() {
      
      $scope.loadingIndicator.hide();
    }, 1500);
    
  };
});

@Calendee, isn’t this calling hide() on an instance? and is it deprecated?

Spoil sport! Just noticed that in the nightly that warning does come up.

This version works : http://codepen.io/calendee/pen/amxrE

So, back to @NairoQuintana : Can you post a work CodePen sample of your code so we can see it not hiding on startup?

Thanks for the help, I’ll try it on monday and let you know if it works. I will post a CodePen, but it works fine on desktop browsers so I’m not sure if that helps

Thanks a lot, this does work. Still one “problem” however, the loader pops up on the absolute right of the screen. Is there any way to center this ?

Edit: apparently the latest nightly already fixed this. Now it shows a centered popup, but on the whole width of the screen. Is there any way to change this ? Not absolutely necessary, but would be nice.

It’s just CSS so you can modify it however you’d like.