v4: creating a loading without presenting makes the view unclickable

Bug Report

Ionic version:

[x] 4.x

Current behavior: This is basically a duplicate of #15345 but the problem is still around. Creating a loading and then not presenting it still causes the backdrop to be visible and block user input.

Expected behavior: I expect the backdrop to appear only after present is called

Steps to reproduce:

1. Create a loading with `await this.loadingCtrl.create({…})
2. Done

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.17
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : none
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, (and 5 other plugins)

System:

   ios-deploy : 1.9.4
   ios-sim    : 7.0.0
   NodeJS     : v10.11.0 (/usr/local/Cellar/node/10.11.0/bin/node)
   npm        : 6.4.1
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

[manucorporat]

Would it be possible to just not attach the overlay to the DOM until present is called?

Unfortunately not, components are not lazy loaded until attached to the DOM.

@zakton5 i see, thanks for explaining it! what I don’t understand is why the code that checks for calling present() can not also create() the overlay.

[zakton5]

@manucorporat I have the following scenario: I want to transition to another page which uses a resolver that makes an http request. The point of the resolver is to wait until the data has been retrieved before navigating to the page. This could take a few seconds if the network is slow. So I decided to create a loading overlay that displays if the page transition takes longer than 250ms for whatever reason. However, the problem occurs when the following happens:

1. Transition takes longer than 250 ms
2. Create the loading overlay
3. Transition finished (cancel overlay with my own code logic)
4. Create overlay finished
5. My own code sees that it is cancelled and so I do not present the overlay.
6. Problem described above

I could probably display the loading on every page transition, but I don’t want to do that. I feel that loading overlays should be used for long running tasks, not simple page transitions that are capable of loading the data quickly. Having the option to display a loading overlay only when the network is slow is very desirable.