I found this old resolved bug in the github issues.
The two issues described in the current behaviour are present in the @ionic/react 5.6.5 release. It also in earlier ones but I updated to the latest build today hoping it was resolved.
“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.”
I found I am using the useIonLoading hook to display notices during asynchronous activities. If those async activities are fast (sub 50ms) then the loading indicator will fail to dismiss correctly.
I had already noticed the issue with overlays not being dismissed when the tab is not focused but didn’t realize it was related until I found this old bug report.
I used the ionic generator to create a blank project and then build this example to demonstrate. I am not sure what the best way to show off code things in this forum is.
I included two buttons. One that uses the hook, and another that uses state to display an IonLoading component.
The one that uses state does not fail the way the one using the hook does.
Am I thinking about this wrong? I suspect that since the react state is not changing there is a need for some kind of useRef call here. But since the overlay hooks don’t return anything there is not much to pin it on.