Estoy trabajando en una versión visual de mi algoritmo de clasificación y me gustaría mostrarle al usuario una animación de carga durante la clasificación por parte de JS. Pero el problema es que JS se comporta raro entonces. Ejecuta la primera línea y la última línea (2 x toggle) y luego lanza la ejecución del algoritmo. Pero si agrego setTimeout (segunda función) funciona como debería. ¿Alguien podría, por favor, explicarme cómo funciona? Ya intenté investigar mucho, pero fue en vano ... Es contrario a la intuición, porque en el primer ejemplo se comporta como si JS fuera asíncrono (1 -> animación de primera línea agregada y 2 -> la animación de última línea eliminada , 3 -> el trabajo de clasificación) y en el segundo ejemplo después de agregar setTimeout como síncrono (1 -> animación de primera línea agregada, 2 -> trabajo de clasificación, 3 -> animación eliminada)

 function sortArray() { mainWrapper.classList.toggle("spinner-hidden"); arrayCopy = [...arrayToSort]; const sortedArray = bearSort(arrayCopy); outputArray.textContent = sortedArray; mainWrapper.classList.toggle("spinner-hidden"); } function sortArray() { mainWrapper.classList.toggle("spinner-hidden"); arrayCopy = [...arrayToSort]; setTimeout(() => { const sortedArray = bearSort(arrayCopy); outputArray.textContent = sortedArray; mainWrapper.classList.toggle("spinner-hidden"); }, 0); }