Avoid DOM changes being merged together

Question

My project includes a function that may take a noticable time to complete on weaker devices, so I would like to display a loading icon to the user while this is happening. Said function performs a bunch of string concatenation and then a single write to the DOM.

My code looks something like this:

function onclick() {
    showLoader();
    
    longDOMWriteCall();
    
    hideLoader();
}

function showLoader() {
    loader.classList.remove("hidden");
}

function hideLoader() {
    loader.classList.add("hidden");
}

It appears as if for some reason the browser runs the show and hide calls, as well as the write call from the function, at the same time, causing the loader to never appear in the first place, despite the code being synchronous. Even making the operation asynchronous using promises produces the same result:

function onclick() {
    showLoader();
    
    longDOMWriteCall().then(hideLoader);
}

How can I stop this from happening, such that the loader appears, the function does its thing, then the loader disappears again? The effect is unnoticable on a high-end device, but the low-end device I've tested with can take up to half a second to complete the call.

Fiddle: https://jsfiddle.net/Emosewaj/u07o8ybj/33/

user_1491895 · Answer

Run the code asynchronously with setTimeout().

In the example below I have a long timeout so the effect is visible on normal computers. You can use 0 on the real device.

const loader = document.getElementById("loader");
const container = document.getElementById("container");

function clickFuncAsync() {
  showLoader();

  longDOMWriteCallAsync().then(hideLoader);
}

function longDOMWriteCallAsync() {
  console.log("Running async");
  return new Promise(resolve => {
    setTimeout(() => {
      let html = "";

      for (let i = 0; i < 5; i++) {
        html += "Content";
      }

      container.innerHTML = html;
      resolve();
    }, 1000);
  });
}

function showLoader() {
  loader.classList.remove("hidden");
}

function hideLoader() {
  loader.classList.add("hidden");
}

#loader {
  height: 32px;
  width: 32px;
}

#loader.hidden {
  display: none;
}

Avoid DOM changes being merged together

1 Answers