How to update GUI at the beginning of socket response handling?

I have the following CSS :

.h {
    display: none;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

In the body of my page I have the following two elements :

<div id="overlay" class="h"></div>
<button>Update</button>

Followed by :

<script src="/socket.io/socket.io.js"</script>
<script>
    const socket = io.connect()
    document.querySelector("button").addEventListener("click", () => {
        socket.emit("update")
    })
    const overlay = document.querySelector("#overlay")
    // Time consuming function to simulate the time needed by the client to process the response of the server.
    const time_consuming_function = async () => {
        const start = Date.now()
        while(Date.now() - start < 1000){}
    }
    socket.on("update", () => {
        console.log("Updating...")
        overlay.classList.remove("h")
        time_consuming_function()
        overlay.classList.add("h")
        console.log("Updated.")
    })
</script>

I did not include the server-side code because the problem doesn't come from there and it works just fine.

How can I make the overlay appear when an update is received, process it, and after it's done being processed make the overlay disappear ?

The console.log are executed synchronously but it's not the case for the overlay.classList.remove/add("h") thus causing them to be executed at the end of the function, so it has no effect because it just hide the overlay which was already hidden.

Somehow it works when I replace the time_consuming_function by a timer. But in the reality I don't have a time, I have an actual function uses CPU.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/qAxnIhr