Toast doesnt work with Loading?

Ionic Framework ionic-v3
1

So I make an http call. Before http call Loading is presented and when response comes (success or error) the loading is dismissed and Toast is displayed. Toast should last for 3 seconds, but that is not the case and it gets shown for .5 second. And only 1 time per page load.

How can I show Loading during HTTP call and how can I show toast after Loading is dismissed so it works??

Here is HTTP call

    this.presentLoading();
    this.http.post(this.mainUrl + '/api/v1/filters', obj, {headers: headers}).subscribe(data => {
      this.loader.dismiss();
      this.presentToast(data.json().success_message, 3000, "toast-success");
    }, err => {
      this.loader.dismiss();
      this.presentToast(err.json().error_message, 3000, "toast-error");
    });

presentToast function

presentToast(msg, duration, cssClass) {
    let toast = this.toastCtrl.create({
      message: msg,
      duration: duration,
      position: 'bottom',
      dismissOnPageChange: true,
      cssClass: cssClass
    });

    toast.onDidDismiss(() => {
      // Do something
    });

    toast.present();
  }

presentLoading

presentLoading() {
    this.loader = this.loadingCtrl.create({
      content: 'Please wait...'
    });

    this.loader.dismiss().then(()=>{

    });

    this.loader.present();
  }

Defining loader

 ...
 export class Filter {

  public loader = this.loadingCtrl.create({
    content: "Please wait.."
  });
  ...
2

Getting the same issue. Toast does not work within .error or .catch . Any workaround yet ?

3

Problem is that toast and loading working asynchronously. And when you call this.loader.dismiss() you donā€™t wait for dismiss finish work and immediately call this.presentToast. That cause an error.

You need to use chaining promise. Your presentToast and presentLoading should return promise.
Example

public presentToast(msg, duration, cssClass): Promise<any> {
    let toast = this.toastCtrl.create({
      message: msg,
      duration: duration,
      position: 'bottom',
      dismissOnPageChange: true,
      cssClass: cssClass
    });

    toast.onDidDismiss(() => {
      // Do something
    });

    return toast.present();
  }

And then something like this:

this.presentLoading()
    .then(() => this.http.post(this.mainUrl + '/api/v1/filters', obj, {headers: headers})).toPromise()
    .then(resp => resp.json())
    .then(data => {
        return this.loader.dismiss()
            .then(() => this.presentToast(data.success_message, 3000, "toast-success"));
    })
    .catch(err => {
        return this.loader.dismiss()
            .then(() => this.presentToast(err.json().error_message, 3000, "toast-error"));
    });

Also you need to chain this.loader.dismiss() in your presentLoading method.

2 Likes
4

unable to import ā€œLoadingControllerā€ from ā€˜ionic-angularā€™.

5

@snikh Thanks for your reply. I will try this out and get back with the feedback.

Regards

6

@snikh Still no success. Now I get this error.

What exactly did you mean by

ā€œAlso you need to chain this.loader.dismiss() in your presentLoading method.ā€ ??

This is how my presentLoading looks like after I edited it

presentLoading(): Promise<any> {
    this.loader = this.loadingCtrl.create({
      content: 'Please wait...'
    });

    this.loader.dismiss().then(()=>{

    });

    return this.loader.present();
  }
7

My bad. Sorry. Change

.then(() => this.http.post(this.mainUrl + '/api/v1/filters', obj, {headers: headers})).toPromise()

to

.then(() => this.http.post(this.mainUrl + '/api/v1/filters', obj, {headers: headers}).toPromise())

About presentLoading:
Are you sure, that this.loader.dismiss need to call every time? When loading not showed and you call this.loader.dismiss() - this may cause an error? If not, then

presentLoading(): Promise<any> {
    this.loader = this.loadingCtrl.create({
      content: 'Please wait...'
    });

    return this.loader.dismiss()
        .then(() => this.loader.present());
  }
1 Like
8

@snikh

I made a change, but it still gives me the same error

Property 'toPromise' does not exist on type 'Observable<Response>'.

But also Phpstorm, gives a red color on .then with note "unresolved function or method then"

9

At the top of your ts file add

import 'rxjs/add/operator/toPromise';
1 Like