Estoy haciendo un pequeño proyecto usando API + SVG para el mapa y estoy usando SVG colocando directamente HTML dentro de la etiqueta SVG, pero parece que cuando la página se está cargando, se muestra HTML puro antes de que se aplique mi JAVASCRIPT o CSS.

Investigué un poco y usé window.onload, load event listener y demás, pero ninguno parece funcionar cuando realmente implemento mi sitio web en netlify.

¿Algún consejo sobre cómo mostrar solo la animación de carga hasta que javascript + CSS se aplique completamente a todos los elementos HTML?

Estoy usando un webpack + vanilla JS para mi proyecto. Publicaré mi código antes para mi archivo JS de entrada

 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); };

Tengo que decir, código anterior, estoy usando window.onload pero nada más funciona realmente. Todo lo que uso, el proceso es siempre el mismo.

1. Muestra HTML SVG junto con textos HTML
2. ENTONCES muestra una animación de carga
3. Finalmente la animación de carga desaparece y todo se carga.

¡Cualquier consejo sería genial!