bug: IonLoading not displaying spinner on Android (React)

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

I’m trying to show an IonLoading popup while my app gets parameters from a server.

Calling the IonLoading element works fine, dismissing too, but it just refuses to show the spinner on Android. In web it works fine. This is the element:

<IonLoading spinner="crescent" isOpen={showLoading} onDidDismiss={() => setShowLoading(false)} message={loadingText} />

I tried manually setting the spinner color, but that didn’t help. When looking into chrome://inspect , I noticed the size of the spinner element was set to zero:

Again, I want to stress that this is a screenshot of chrome://inspect of the Android WebView. As you can see, in PWA there is actual content for the spinner; the whole SVG tag is missing in android:

Expected Behavior

Spinner should show on Android as it does on PWA.

Steps to Reproduce

Create Ionic-React app, configure IonLoading as shown above, show with const [showLoading, setShowLoading} = useState(true);

Code Reproduction URL

No response

Ionic Info

Ionic: Ionic CLI : 6.14.1 (C:\Users\fabia\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework : @ionic/react 6.2.7

Utility: cordova-res : 0.15.4 native-run : 1.7.0

System: NodeJS : v18.8.0 (C:\Program Files\nodejs\node.exe) npm : 8.18.0 OS : Windows 10

Additional Information

I tried updating Ionic without success, the behavior persists.

[liamdebeasi]

The problem here is that IonLoading does not automatically define child Ionic components used internally. Both IonBackdrop and IonSpinner are used in IonLoading.

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