bug: ion-loading does not render properly for on-device production iOS and Android builds

[crhayes]

Prerequisites

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

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

In the attached image, the IonLoading component is missing the backdrop and the spinner icon.

Expected Behavior

The backdrop and spinner should be visible.

Steps to Reproduce

Start a new project, install capacitor for ios (and/or android), build, and run it on a device/simulator/emulator.

Make sure not to run an interactive build as the spinner renders as expected when using hot-reloading with ionic cap run ios -l. This is only an issue for production builds.

1. ionic start (create default react project)
2. Add IonLoading component to Home.tsx

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Blank</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Blank</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonLoading isOpen />
        <ExploreContainer />
      </IonContent>
    </IonPage>
  );
};

3. ionic cap add ios
4. ionic cap build ios
5. ionic cap run ios

Code Reproduction URL

https://github.com/crhayes/ion-loading-bug-repro

Ionic Info

Ionic:

   Ionic CLI       : 6.20.1 (/Users/hayes/.nvm/versions/node/v16.14.2/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 6.2.7

Capacitor:

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

Utility:

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

System:

   NodeJS : v16.14.2 (/Users/hayes/.nvm/versions/node/v16.14.2/bin/node)
   npm    : 8.5.0
   OS     : macOS Monterey

Additional Information

Related issue: https://github.com/ionic-team/ionic-framework/issues/24463 Related PR: https://github.com/ionic-team/ionic-framework/pull/24439

[liamdebeasi]

Thanks for the issue. I can reproduce this behavior. Here is a dev build if you are interested in testing the proposed fix:

npm install @ionic/[email protected] @ionic/[email protected]

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/25967, and a fix will be available in an upcoming release of Ionic Framework. Please feel free to continue testing the dev build.

[crhayes]

@liamdebeasi Thanks!

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