<IonLoading> doesn't work in react strict mode

Ionic Framework Ionic React
1 
const App: React.FC = () => {

	const { status, data, error } = useGetSession();

	if (error) {
		return <span>Error loading session {error.message}</span>
	}

	else if (status === 'loading') {
		return <IonLoading isopen={true}/>
	}

	if (status === "success") {
		<IonApp></IonApp>
	}
}

In react strict mode, this code will always display the loading component and it will never go away because strict mode re-renders your component twice.

The reason is that the way works, if you call it twice, it won’t disappear if you call it with <IonLoading isOpen={false}). The same applies with useIonLoading and present() and dismiss(); IonLoading kind of works like a modal dialog and so this won’t work with react strict mode.

Note: If I use a component that doesn’t present as a modal like this is no problem.

Any suggestions on how to make this work with IonModal?

Note: I’m using tanstack query for my data loading.

My ionic info:
Ionic:

Ionic CLI : 7.1.1 (/Users/rpatulski/.nvm/versions/node/v18.12.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.4.3

Capacitor:

Capacitor CLI : 5.4.2
@capacitor/android : not installed
@capacitor/core : 5.4.2
@capacitor/ios : not installed

Utility:

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

System:

NodeJS : v18.12.1 (/Users/rpatulski/.nvm/versions/node/v18.12.1/bin/node)
npm : 8.19.2
OS : macOS Monterey

Thanks

2

ion-loading should work in React strict mode. I also use tanstack query and I haven’t had this problem in my app although I use ion-loading all over the place.

Probably the issue is the way you’ve structured your code here:

	else if (status === 'loading') {
		return <IonLoading isopen={true}/>
	}

	if (status === "success") {
		<IonApp></IonApp>
	}

I would do something like this:

return(
  <IonApp>
     <IonLoading isOpen={status === 'loading'} />
  </IonApp>

The points are:

  1. Don’t just return a modal, put the modal in with rest of the stuff that the component loads. If that other stuff needs to load, use Suspense.
  2. ion-loading’s isOpen should never just be set to true; always set it to the condition of when it should be true.