Why Your Ionic Loading Overlay Won't Dismiss (And How to Fix It)

The first time I worked with Ionic, I spent hours debugging a simple problem: I could present a global loading overlay with the useIonLoading hook, but I couldn’t dismiss it.

Here’s the component that caused it:

Why did this happen?

The problem was that present was called twice, creating two loading overlays. But only one would be dispatched, leaving the other stuck. This seemed odd, why are there two overlays in the DOM tree?

To understand why, we need to look at how useEffect behaves in development mode.

How useEffect works

When your application is wrapped in React.StrictMode, which is recommended for debugging, each effect runs twice in development mode. See the official docs for details.

Even though it made me have a bad time, it made recognize a big problem I wasn’t aware of, bigger than the overlay problem.

It made me realize that I wasn’t properly handling the AI model loading task,. Being executed twice, I noted that the model was being loaded twice. This was a separate issue, but kudos to the strict mode, to help catch that.

Of course, it also caused the loading overlay problem because present was called twice.

The second part of the problem

When I fixed the model double load I solved one problem, but the overlay still didn’t behave as expected. Ionic’s internal logic didn’t prevent multiple overlays or discard both when called twice.

The only relevant information I found was an old GitHub issue that suggested we handle it manually.

The solution

I simply added:

• An isLoading flag in my AI service class.
• A condition to check if the model was already loading before calling present.

This solved both problems: it prevented multiple model loads and ensured only one loading overlay was created and properly dismissed.

What I learned

This bug was frustrating, but StrictMode did its job: it exposed a deeper issue I wasn’t even looking for. It forced me to rethink how I handle async tasks inside effects, and that’s a win.

If you’ve ever struggled with unexpected double renders, don’t ignore them. They might be pointing to a bigger flaw in your logic.

Here’s the repository if want to check my implementation.