[VUE] bug: ion-loader update textContent causes background to disappear

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

When textContent is updated, the white background box disappear

Expected Behavior

One should be able to change the loading text without issues

Steps to Reproduce

const loading = await loadingController.create({
        message: "Loading...",
      });
      await loading.present();
setTimeout(() => {
loading.textContent = "new content";
}, 1000);

Code Reproduction URL

https://github.com/Suxsem/ionic-loading-bug

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (C:\Users\semer\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework : @ionic/vue 6.1.13

Capacitor:

Capacitor CLI : 3.6.0 @capacitor/android : 3.6.0 @capacitor/core : 3.6.0 @capacitor/ios : 3.6.0

Utility:

cordova-res : 0.15.4 native-run : 1.6.0

System:

NodeJS : v14.18.1 (C:\Program Files\nodejs\node.exe) npm : 6.14.15 OS : Windows 10

Additional Information

No response

[Suxsem]

Ok the workaround works, thank you. For reference, replace loading.textContent = `Loading... ${percent}%`; with loading.querySelector(".loading-content")!.textContent = `Loading... ${percent}%`;

Hope you can make the component reactive in the future!

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