IonicLoading doesn't hide on startup


#1

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.


#2

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();

#3

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.


#4

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);
    
  };
});

#5

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


#6

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?


#7

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


#8

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.


#9

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