Backdrop display displaying too late with $ionicLoading.show()

ionic-v1
1

I use $ionicLoading.show() especially to display a loading while submitting any form.

I could have one loading informing: “Creating your car”, for instance.

I expect the backdrop to display immediately after clicking the “validate” button.
However, it takes a while, up to 1 second before appearing… allowing user to click again on validate… calling twice the server.

I’m pointing out that my declaration do not specify any delay:

$ionicLoading.show({
    template: '<i class="icon ion-loading-b"></i><br>Creating the car'
});

Is it “normal”?

Is there a way to fix it?

2

It should open immediately by default, assuming the application has already started up fully.

What is the context that this snippet of code runs in? Perhaps the delay is happening not with the loader, but a delay with the code leading up to this point? Can you log to the console right before you run the show() method? If that console log appears at the same time as the loader, then it would likely indicate the issue is something else. If the console log appears in the browser and you notice a delay before the loader appears, then there is something strange going on with the loader.

3

Hi,

I made the “console log” test, and it sounds the issue comes from the ionicLoading…starting too late.

I just made this code to test:

in my tpl.html:

<a ng-click="testLoading()">Click to launch the loading</a>

in my controller:

$scope.testLoading = function() {
            $ionicLoading.show({
                template: '<i class="icon ion-loading-b"></i><br>Loading ...'
            });
        };

The loading animation appears about 1 second after the click, not immediately as expected.

I’m using the latest beta 13.

4

I did not understand well, you want to run a kind of “loading” in your app? If so, it should be automatic and not a call to a function, you would have to do the same on each controller function in another view if you were running somehow. For example in my app, each time a request to my webservice I run a loader there waiting for answer. Creating it in the config and also create a factory Might investigate that. If I understood your question well not help you, sorry lol: D

5

Obviously…it’s for the example.

What I don’t figure out is:

why the loading takes some delay to appear… There isn’t some long computation…in the ionicLoading’s directive code.

6

You Might try one of these parameters?

$ionicLoading.show({
    content: 'Loading Data',
    animation: 'fade-in',
    showBackdrop: false,
    maxWidth: 200,
    showDelay: 500
});
7

I’ll try it just now

8

Same issue, too long to appear…

I’m clicking…up to 1 second later… loading appears.

Tested on Chrome (desktop) and iPhone 4s and iPhone 6 (ios app)

9

I figured out the issue:

$ionicLoading options are global !

Simply this case:
I define $ionicLoading.show(....,delay:2000,.....) in controller A.
I define $ionicLoading.show(.........) without specifying any delay in controller B.

I expected B to start immediately on click, since no set delay.

However, it gets the same delay as the previous $ionicLoading: 2000 ms !

To fix this, I have to specify delay:0 in the one of controller B :wink:

1 Like