Multiple loading present simultaneously, got `removeView was not found`

I ran into a loading problem, in my case, I have two custom components A & B, each of them has UI and services, and them both show loading when performing background service.

Then I added A & B into same page. When the page got rendered, I got error “removeView was not found”. I figured that there were two loading presenting in the same time, so dismiss() got messed up maybe.

As for loading, I’ve created a custom global LoadingLoader service, the snippet as following

@Injectable()
export class LoadingLoader {
    loader: Loading;

    constructor(public loadingCtrl: LoadingController) {
      
    }

    presentLoading(content?: string) {
        console.log('----- present loading ------ ');
        this.loader = this.loadingCtrl.create({
            content: content
        });
        this.loader.present();
    }

    dismiss() {
        console.log('----- dismiss loading ------ ');
        this.loader.dismiss();
    }
}

As for custom component A or B, it just presented and dismiss loading before and after async calls

Any suggestion to my case?

1 Like

I’ve also met, but I don’t know how to solve it

Try it, worked for me.

 dismiss() {
        console.log('----- dismiss loading ------ ');
        this.loader.dismiss();
        this.loader = null;
    }
1 Like

I think LoadingLoader causes more problems than it solves, and would eliminate it entirely. I make it a rule never to store loading indicators in object properties, only have them be lexically scoped. This protects me from reuse and double-dispose bugs.

1 Like