JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="clickFunc()">
    Run
</button>
<button onclick="clickFuncAsync()">
    Run Async
</button>

<div id="loader" class="hidden">
    <img src="https://picsum.photos/32/32">
</div>

<div id="container">
</div>

CSS

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

#loader.hidden {
    display: none;
}

JavaScript

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

function clickFunc() {
    showLoader();

    longDOMWriteCall();

    hideLoader();
}

function clickFuncAsync() {
    showLoader();

    longDOMWriteCallAsync().then(hideLoader);
}

function longDOMWriteCall() {
	console.log("Running sync");
    let html = "";

    for (let i = 0; i < 50000; i++) {
        html += "<div>Content</div>";
    }

    container.innerHTML = html;
}

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

        for (let i = 0; i < 50000; i++) {
            html += "<div>Content</div>";
        }

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

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

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