Muestra al usuario cuándo está cargando

La idea clave

Cuando comienza una operación, la interfaz debe decir qué está pasando. Aquí mostramos dos estados con botones reales, sin inventar una espera de red: «Cargando…» y «Datos listos».

Ejemplo paso a paso

Este ejemplo muestra la idea en acción. Sigue los pasos y después cámbialo tú.

const salida = document.querySelector('#saludo');
document.querySelector('#accion').addEventListener('click', () => {
  salida.textContent = 'Cargando…';
});
document.querySelector('#terminar').addEventListener('click', () => {
  salida.textContent = 'Datos listos';
});

Editar y probar este mismo ejemplo ↓

1. Al pulsar Empezar, el texto visible cambia a «Cargando…».
2. Cuando la operación termina, el segundo botón muestra «Datos listos».
3. Los botones simulan los cambios de estado; no se realiza una petición ni se finge un retraso.

Practica con código

Antes de empezar, piensa: ¿Qué texto aparece tras pulsar Empezar y cuál al pulsar Terminar?

Cambia el mensaje final a «Sin resultados» y prueba ambos botones.