Best practice for LoadingController

Ionic Framework ionic-v3
1

Hi,

i very unhappy with the LoadingController.
Can someone add best practice for the LoadingController?
in the ionic-conference-app is no LoadingController.

My Problem is the Loading Controller dismiss function, this function is not working on my Project.

And can i add a global loading function an call them like:

this.loading(true);
this.loading(false);

    let loading = this.loadingCtrl.create({
        content:""
      })
      loading.present();
    ..
    loading.dismiss();

image
Pasted image451Ă—530 30.7 KB

Thanks,
Daniel

2

From looking at your code, I’d say you have a problem with the scope of the loading variable.

Someone on this forum will correct me if I’m wrong but I think that

let loading = this.loadingCtrl.create({ content:"" })

will mean that loading cannot be accessed from the toast routine below.

Try changing the scope of the variable by declaring it in the constructor.

3

Try this and check this works for you… for me this works well…

export class LoginPage {
  loading: any;

  constructor(private loadingCtrl: LoadingController) {
  
      this.loading = this.loadingCtrl.create({
          content: 'Authenticating...'
      });

  }

  login(form) {
       this.loading.present();

     this.auth.loginWithEmail(this.user).then(res => {
        // Successfully logged in
        // now, dismiss the Loading and SetRoot to specific page..
        this.loading.dismiss().then(() => {
             console.log('Login Success', res);
             this.nav.setRoot(HomePage, {}, {animate: true, direction: 'forward'});
        });
     });
   }
}

Let me know if there’s other way to make it more better…

3 Likes
4

It is working!! :slight_smile: Awesome Thanks

5

Great !! Glad this works for you.

6

But i can’t call the loader multible times :confused:

image
Pasted image889Ă—216 48.7 KB

7

yes… this happens because of change detectors of angular.
I haven’t not much knowledge about this… ask to superior who have great knowledge about zone, change-detectors, etc

A temporary workaround is.
create loading object every time you want in your different methods and use present and dismiss in the same methods. Do not create it in a constructor.

But for me, I don’t want to create it multiple times, I want to follow above posted approach. I trying to find the solution upon it.
Let me know if you have find any solution on this.

8

After several attempts with LoadingController, I decided to use cordova spinner plugin and I am quite satisfied.

9

I stopped using LoadingController for now, waiting until it get fixed.

1 Like
10

because this.loading had dismissed. if u wanna use it repeated, u can only do like this
constructor(xxxxxx){}
yourmethod(){
let loader = loadingController({content…});
loader.present();
this.someService.someMethod().subscribe(res=>{
loader.dismiss();
//dosth
},err=>{
loader.dismiss();
//dosth
})
}

it’s terrible to define it in every remote api method.

11

Hi, I think i found a solution. If you describe loadingCtrl in presentLoadingIos method instead of Constructor, it wil be okey. You can see below

  presentLoadingIos() {
    this.loading = this.loadingCtrl.create({
      spinner: 'ios',
      content: 'This is the "ios" spinner. It will dismiss after 3 seconds.'
    });
    this.loading.present();
  }

  hideLoadingIos() {
    this.loading.dismiss();
  }
12

I like it when my build tools tell me when I make stupid mistakes. I also like it when object lifecycle is localized, because it means I can quickly zero in on the only possible place a bug can be living.

The design in the previous post flies directly in the face of all of this. Neither the programmer nor any static code analysis tool I’ve seen has any idea how to prevent or identify the cause of double-dispose or reuse bugs that will fatally torpedo your app at runtime.

I recommend always making LoadingControllers lexically scoped, and never storing them in controller properties.

1 Like
13

In Ionic5 it works with some changes

this.loading = this.loadingCtrl;
this.loading.create({
          content: 'Authenticating...'
      });