When to dismiss the ionic loading controller while waiting for an observable

Question

I'm wondering how to properly use the ionic-2 loading controller while waiting for async observable to arrive - as observable might arrive in none, single or many "waves" of responses.

first question - how to present

Should i use loader.present() or loader.present().then(... i saw a lot of code examples that "ignore" the async nature of the loader (i even saw loader.present(//function to execute)

second question - when to dismiss

As mentioned, a response from a subscription can arrive in unknown "waves" of responses - taking it into account, when should i dismiss the loader? what if no response arrives? what if there are couple of responses? for example:

let loader = this.loadingController.create({content : "something"})
loader.present().then(()=>{
    source.subscribe((school)=>{
        this.schools.push(school)
        loader.dismiss()
        }, err=> loader.dismiss()
    )
 })

third question - how to dismiss

I noticed that there are a lot of issues regard the dismissing of the loading controller (e.g. Ionic 2 - Loading Controller doesn't work). Is catch after the dismiss is enough..? What to do if after the loading i want to push to another page...?

Thank you for your patience.

Answer 1

first question - how to present?

The correct way to present the loader is by using then, because otherwise you can face some issues related to buggy animations and maybe some other weird issues as well. After all, if the method returns a promise, the correct way to use it will always be to do something else when the promise is done.

loader.present().then(() => { /* ... */ });

I also do the same when I need to dismiss the loading:

loading.dismiss().then(() => { /* ... */ });

second question - when to dismiss?

The idea if using a loading is to let the user know that something is happening in the background, so I think you should dismiss the loading after the first wave.

If no response arrives (so the results are empty for instance) you can include an *ngIf="result.items.length === 0" condition to show a div with a message saying that the results are empty. If a new wave arrives with some items in the result, that div will be hidden automatically.

third question - how to dismiss?

Just like the present method, the dismiss also returns a promise. In this case, it's easier to see some buggy behavior in the animations if you don't use the then. So again, by just waiting to the dismiss method to end (by using the then) you can push a new page or do what you need to do and it should work properly:

loading.dismiss().then(() => { this.navCtrl.push(NewPage); });