bug: @ionic/react IonLoading component has several issues with dismissing

[aub]

Bug Report

Ionic version:
@ionic/react: 4.11.2

Current behavior:
We've had a few different problems with the loading indicator being dismissed. The first is that if you synchronously set it to be open and then immediately set it to not be open, it won't go away. The second is related to switching browser tabs while it is being created. If you switch tabs while your code is causing the overlay to come and go, you may find that when switching back to the tab where it is displayed it will still be showing.

Expected behavior:
The overlay always disappears when dismissed.

Steps to reproduce:
In our code we have a global loading status in the redux state, and the loader uses that to control whether or not it is displayed. This generally works ok when it is shown, then some time passes, then it is dismissed, but if we show it and then immediately dismiss it then it will stay on the screen.

For the other issue, have some code that displays the loader with isOpen set to true, waits a little while, and then changes isOpen to false. Before the loader is displayed on the screen, switch to a different tab, then wait a little while and switch back. You may find that it is still displayed.

Related code:

Other information:

Both problems seem to be caused by code in the present function in ionic/packages/react/src/components/createControllerComponent.tsx. Specifically, the fact that the overlay is created asynchronously means that after creation it needs to respect changes that have been made in the meantime.

For the first one, the problem is that during the creation of the overlay the component updates to set isOpen to false. Because the overlay doesn't yet exist, the dismiss in componentDidUpdate is not called, and after the overlay is created it is told to present itself regardless of the current state. There needs to be a test there for making sure the props are still isOpen.

For the second one, I'm less clear on how this happens but the present function is called multiple times. There is no check in there for whether the overlay already exists, so the code makes a second one, which can leave the first one still displayed with no way to remove it. The solution here is to check and see if the overlay already exists.

I will have a PR for both of these issues shortly.

Ionic info:

Ionic:

   Ionic CLI       : 5.4.4 (/usr/local/lib/node_modules/ionic)
   Ionic Framework : @ionic/react 4.11.2

Capacitor:

   Capacitor CLI   : 1.2.1
   @capacitor/core : 1.2.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.12.0 (/usr/local/Cellar/node/12.12.0/bin/node)
   npm    : 6.11.3
   OS     : macOS Catalina

[schontz]

I'm having the same issue with browser tabs/focus.

[elylucas]

Thanks for reporting the issue, and thanks @aub for submitting the PR to fix it! It looks good and it will be in the 4.11.3 release in the next few days.

[schontz]

I updated to 4.11.3 today and can confirm that this issue is fixed. Thank you!!

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