Nuevo en el desarrollo web y tratando de entender el manejo del DOM. Desea implementar un control giratorio que aparece mientras se procesan los datos y desaparece después. Me imagino que el orden debe ser algo como esto

1. al presionar el botón, hacer visible el girador y llamar a la función de datos
2. después de que finalice la función de datos, vuelva a hacer invisible el girador

Usando Bootstrap 5

La implementación actual es algo así como:

 document.getElementById("button").addEventListener("click",function(){document.getElementById("spinner").classList.toggle("invisible");}) document.getElementById("button").addEventListener("click",dataProcess()); document.getElementById("button").addEventListener("click",function(){document.getElementById("spinner").classList.toggle("invisible");})

Entiendo que el orden en que se agregan los detectores de eventos es el orden en que se ejecutan, pero el control giratorio no cambia porque el DOM no se actualiza hasta que se ejecutan todas las funciones (ya que cambió dos veces para entonces es invisible nuevamente) . ¿Hay alguna manera de actualizar el DOM entre eventos o una mejor manera de implementar la ruleta por completo?