bug: useIonLoading, message container is always rendered even when not using a message

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

Using the useIonLoading() hook with the minimum parameters, we have a design error.

This element should not render if the message parameter is empty.

Expected Behavior

This should be the default behavior.

Steps to Reproduce

Using the <IonLoading isOpen={true} /> component works perfectly. The bug is not in the core. The bug occurs when receiving the default parameters in useIonLoading.

const [present, dismiss] = useIonLoading();
useEffect(()=>{
    present();
}, [])

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.3 Ionic Framework : @ionic/react 6.3.4

Capacitor:

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

Utility:

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

System:

NodeJS : v14.16.0 npm : 6.14.11 OS : macOS Monterey

Additional Information

This happens with @ionic/react in version 6.3.4 using the useIonLoading() hook.

[sean-perkins]

Appreciate the PR for this!

This has been merged and will be available in both the nightly build and the next patch release of Ionic (6.3.5).

[bipoza]

@liamdebeasi I am preparing a pull request fixing this problem.