I'm making a small project using API + SVG for map and I am using SVG by directly putting inside HTML under SVG tag but it seems like when the page is loading, pure HTML is displaying before my JAVASCRIPT or CSS is applied.

I have done some research and used a window.onload, load event listener and such but none seem to work when I actually deploy my website on netlify.

Any advice on how only show loading animation until javascript + CSS is fully applied to all HTML elements?

I am using a webpack + vanilla JS for my project. I will post my code before for my entry JS file

document.querySelector(".main").style.visibility = "hidden";
window.onload = () => {
    document.querySelector(".main").style.visibility = "visible";
    navList();
    regionHoverEvent();
    generateRippleEffect();
    document.querySelector(".main").style.visibility = "visible";
    document.querySelector(".koreaMap").style.visibility = "visible";
    document.querySelector(".navContainer").style.visibility = "visible";

    setInterval(() => {
        generateRippleEffect();
    }, 5000);

    setInterval(() => {
        document.querySelectorAll("i").forEach((item) =>
            item.addEventListener("animationend", () => {
                item.classList.remove("enterCircles");
                item.classList.add("exitCircles");
                setTimeout(() => {
                    item.parentElement.remove();
                }, 5000);
            })
        );
    }, 3000);
};

I have to say, code above, I am using window.onload but nothing else really works. Anything I use, the process is always the same

1. HTML SVG shows along with HTML texts
2. THEN it shows a loading animation
3. Finally loading animation disappears and everything is loaded.

Any advice would be great!