CODEWITHSUNDEEP
ionic-frameworkionic4
Umaiz Khan
Umaiz Khan

Reputation: 1227

Ionic 4 Loadingcontroller overlay doesnt exist

I created a simple function of creating a loading like this

async presentLoading() {
  const loading = await this.loadingController.create({
    message: 'Please Wait...',
  });
  await loading.present();
}

And i am closing the loader when the data is fetch like this

  getUserData(){
  console.log(this.userID);
    this.api.getCompanyEmploye(this.userID).subscribe(res => {
     this.loadingController.dismiss(); //closing here 

      console.log(res);
      this.user = res.records[0];
      this.familyMembers = res.records[0].family_members;
    });
  }

I am calling both function in constructor

constructor(public loadingController: LoadingController){
  this.presentLoading();
  this.getUserData();
}

Its showing error of ERROR Error: Uncaught (in promise): overlay does not exist

Upvotes: 6

Views: 5575

Answers (2)

Elias
Elias

Reputation: 31

for me, the issue is simply because I don't have .catch() for the promise. As@Sergey suggested, this is because the loader is not ready when you calling the ionic loader

this.loadingController.dismiss()
          .then(async () => {
            await this.setStorageForLocalData(data);
          })
          .catch(console.error);

where .catch() will dismiss the error

Upvotes: 0

Sergey Rudenko
Sergey Rudenko

Reputation: 9225

The issue is that your API call responds sooner than the loading controller gets instantiated. Instead of parallel calls, you should try to serialize those this way:

Make your presentLoading method to return Promise:

async presentLoading() {
  const loading = await this.loadingController.create({
    message: 'Please Wait...',
  });
  return loading.present();
}

Now you can call it this way:

getUserData(){
  this.presentLoading().then(()=>{
     this.api.getCompanyEmploye(this.userID).subscribe(res => {
        this.loadingController.dismiss(); //closing here 
        console.log(res);
        this.user = res.records[0];
        this.familyMembers = res.records[0].family_members;
    });
  })
}

And in your constructor you need only to call for the API

Upvotes: 11

Related Questions