Async/await function to show, wait, hide overlay not working in javascript-CodePudding

I'm having a problem with showing an overlay div element and then hiding it again after the runSearch() function has completed. In short, the overlay does not appear at all.

What the overlay should look like if it worked:

If I had to guess, I believe it could relate to a misunderstanding about how to implement async/await correctly in javascript.

Since I am limited for space here, the full Github project is accessible as a fully deployed page

Full Github project is accessible as a fully deployed page here.

To reiterate, the problem is that the overlay does not appear at all during this sequence of events and I'm seeing page elements prematurely before the page is built:

    loadingOverlayOn();
    await runSearch(cityName, cityState, cityCountry, cityLat, cityLng, units)
    loadingOverlayOff();

CodePudding user response：

You are not awaiting fetch, you are using then instead.

You have to await fetch

See below example

const response = await fetch(url);
const jsonData = await response.json()