v4: creating a loading without presenting makes the view unclickable

[zakton5]

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]

Why are you creating the overlay if you are not presenting it?

[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.

[zakton5]

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

[WhatsThatItsPat]

There used to be a delay property for loading, which I miss. Maybe this is a reason to bring it back.

[zakton5]

@PatrickMcD Yeah if a delay property was added that would solve my problem completely

[WhatsThatItsPat]

@zakton5 Here's when it was removed: #11583

I used it in v1 a lot. Maybe make a feature request to bring it back.

[hiepxanh]

I have the same problem when my API call sometime can't load fast enough, I have to check is it still loading or not to show.

[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.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.