Estados de carga y espera

1) Por qué gestionar la espera

• (1) que la acción comenzó, (2) cuánto tomará y (3) qué hacer si algo salió mal.
• El buen estado de arranque reduce la ansiedad, mantiene el enfoque y ahorra tiempo.

2) Selección de patrón: skeleton, progress, spinner, streaming

Skeleton - cuando se conoce la estructura del contenido futuro, pero no hay datos. Previene CLS.
Barra de progreso (determinista): cuando se conoce un volumen o etapas (por ejemplo, apload, KYC).
Indeterminate progress - Cuando la duración es desconocida, pero el proceso es real (inicialización).
Spinner - sólo como un indicador breve de hasta 600-800 ms; más adelante - skeleton/progreso/texto.
Streaming/partial render: damos los datos en partes (SSR/segmentos) y mostramos las zonas terminadas inmediatamente.

Regla: no deje al usuario en «espacio vacío». Si hay más de 1 s - dar la estructura y el significado.

3) Umbrales temporales y presupuestos (puntos de referencia)

≤ 100 ms - respuesta visual instantánea: 'busy' en el botón/campo.
≤ 1000 ms - skeleton/indicador + texto «Cargamos»....

4) Micro-patrones de respuesta instantánea

Traducimos el control a 'busy' de inmediato (animación ≤ 100 ms), bloqueamos los clics repetidos.
Cambiamos el texto del botón a «Enviar»..., mostramos el brindis «Solicitud aceptada» (opcional).
Si devuelve el enfoque en el campo, el skeleton local en la zona de resultados.

5) Skeleton sin «saltos»

Dibuja 1:1 la forma del contenido futuro: las alturas de los bloques, las proporciones de los medios ('aspect-ratio').
Animación shimmer: 1200-1600 ms, amplitud de brillo ≤ 20%, sin estroboscopio.
En listas grandes: virtualización + limitación del número de esqueletos en el DOM.

css
.skeleton{position:relative; background:var(--bg-elevated); border-radius:12px; overflow:hidden}
.skeleton::after{
content:"";position:absolute; inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
animation:shimmer 1. 4s infinite;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

6) Progresos y etapas