bug: useIonLoading should return async present() and dismiss()

[csaar95]

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

Current Behavior

I'm currently using the useIonLoading-hook to manage the loading spinners while fetching data from our API.
Sometimes there occurres a bug. After fetching data, the loading will not dismiss.
Firstly I thought the dismiss-function isn't working in the catch part of a try..catch snippet. But after reading some similar issues and lots of testing, it turned out the statement between the present and dismiss finished too fast, so dismiss got called before the present finished.
Furthermore the loading methods present and dismiss are defined as async functions, so I'm expecting that the hook returns async functions too. In this case I could wait for the termination of present.

PS: Same behaviour with useIonToast, but there it isn't that critical.

Expected Behavior

The IonLoading dismisses after calling present.

Steps to Reproduce

Install the code example and click the button.

Code Reproduction URL

https://github.com/csaar95/ion-loading-test

Ionic Info

Ionic:

Ionic CLI : 6.6.0 (C:\Users\Christian\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/react 5.9.1

Utility:

cordova-res : not installed
native-run : 1.5.0

System:

NodeJS : v16.7.0 (C:\Program Files\nodejs\node.exe)
npm : 7.20.3
OS : Windows 10

Additional Information

No response

[sean-perkins]

@csaar95 thanks for reporting this issue!

With your reproduction repository, I was only able to replicate the issue after removing the behavior between present and dismiss. While I agree completely that calling present and dismiss in that order should always dismiss the component (toast/loader/etc.).

[sean-perkins]

@csaar95 this has been resolved and will be included in the next release of Ionic React (> 5.9.1).

All present/dismiss hook's will return the promise instance so that you can wait for the loader to present before executing further logic/dismissing.

i.e.:

const [showIonLoading, dismissIonLoading] = useIonLoading();

const handleClick = async () => {
    await showIonLoading('Loading');
    dismissIonLoading();
};

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