WebDriverIO: wait for any of 2 possible outcomes

Question

I'm using WebdriverIO with appium-windows-driver and WinAppDriver.

In my test case scenarios, User may load a file, which can be quite a long process. So I have to wait until the loading spinner disappear.

It can leads to 2 different outcomes :
- either a prompt is displayed (and the loading spinner is still visible underneath)
- or the spinner vanishes and User is back on the HMI

So far I have been studying all waitFor or waitUntil methods to achieve this. To my understanding, i cannot use any of the waitForClickable - waitForDisplayed - waitForEnabled - waitForExist - waitForStable - waitUntil methods because I cannot predict which element to wait. I need my script to go on if any of the 2 outcomes happen.

await loadFile(fileName);
/* loading in progress... */

const element1 = await driver.$('~automationId1');
const element2 = await driver.$('~automationId2');

await element1.waitForDisplayed({ timeout: 60 * 1000, interval: 2000 });
await element1.click();
/* AND go on with my scenario */
OR
await element2.waitForClickable({ timeout: 60 * 1000, interval: 2000 });
/* AND go on with my scenario */

Answer 1

Thanks to Joao Jesus'input, I reconsidered this as a classic asynchronous situation.

await loadFile(fileName);
/* loading in progress... */

const element1 = await driver.$('~automationId1');
const element2 = await driver.$('~automationId2');

const element1DisplayPromise = element1.waitForDisplayed({ timeout: 60 * 1000, interval: 2000 });
const element2ClickablePromise = element2.waitForClickable({ timeout: 60 * 1000, interval: 2000 });

Promise.any([element1DisplayPromise, element2ClickablePromise])
.then(async () => {
    const isElement1Displayed = await element1.isDisplayed();
    if (isElement1Displayed) {
        await element1.click();
    }
});