How to properly work with asynchrony in selenium for javascript?

Question

JavaScript

Killed a lot of time for tests. Either I have a problem with understanding asynchrony, or one of the two.
Please tell me a working pattern in js.

const isVisible = (element) => browser.wait(until.elementIsVisible(element), 20000);

// async function isVisible(element) {
//     await browser.wait(until.elementIsVisible(element), 20000);
//}

async function loadingProcess() {
    const loading = await browser.wait(until.elementLocated(By.xpath("//div[@id='loading']")), 20000);
    await browser.wait(until.elementIsNotVisible(loading), 20000);
}
await browser.get(myURL);

// тарам-парам-пам

const loginBtn = await browser.wait(until.elementLocated(By.id('login')), 20000).then(isVisible);
loginBtn.click();
await loadingProcess();

await browser.wait(until.elementLocated(By.linkText('Websites')), 20000).then(isVisible).then(btn => btn.click());
await browser.wait(until.elementLocated(By.xpath("//input[contains(@class, 'textbox')]/../../td[2]/a")), 20000).then(isVisible).then(btn => btn.click());
await loadingProcess();

await browser.wait(until.elementLocated(By.xpath('//a[text()=" Create directory"]')), 20000).then(isVisible).then(btn => btn.click());

All this at the very least works, but not always. I have doubts about the loadingProcess and isVisible functions. If isVisible is rewritten via async (commented out), then the driver does not wait at all. loadingProcess also works as it should in 4 out of 5 cases.
Perhaps there is some more modern and shorter way? I certainly don’t want to make crutches with driver.sleep().
div[@id='loading'] is a div that covers the entire viewable area of ​​the browser and becomes display:none when loading is complete.