Ion-loading does not display

I tried to create a loading spinner while making a http request, the ionic-loading is inserted to the DOM but it is invisible. Here is the code

from(this.loadingCtrl.create({ message: 'Loading...' }))
      .pipe(
        tap(loadingEl => {
          loadingElement = loadingEl;
          loadingEl.present();
        }),
        switchMap(() => self.dataService.getdata())
      )
      .subscribe(
        (response: any) => {
          console.log(response);
          loadingElement.dismiss();
        },
        error => {
          console.error(error);
        }
      );

Does anyone have the same problem?

I believe the information needed to understand what is going on here lies in this article.