Loading States Mobile
Loading States Mobile
6 reglasSkeleton para contenido estructurado
Usa skeleton screens (bloques de placeholder con shimmer animation) para cargar contenido con estructura predecible: feeds, cards, listas con avatar + texto. El skeleton debe replicar la forma exacta del contenido final. Reduce la percepción de tiempo de carga en hasta un 40% vs spinner porque da contexto de lo que llegara.
investigación 2026Spinner para acciones bloqueantes cortas
Usa spinner solo para acciones bloqueantes de corta duración (< 3 segundos) donde el contexto no tiene estructura predecible para mostrar skeleton. Aparece inmediatamente al iniciar la acción y desaparece en cuanto hay resultado. Para acciones que pueden durar más de 3 segundos, muestra una barra de progreso con porcentaje o descripción del estado actual.
investigación 2026Pull to refresh: física y confirmación
El pull-to-refresh debe mostrar: resistencia elastica al jalar, indicador de threshold visual, spinner durante la carga, y confirmación de exito (checkmark o bounce) al completar. Sin confirmación de exito el usuario no sabe si la actualización funciono o si debe intentar de nuevo. La confirmación debe durar mínimo 800ms antes de desaparecer.
investigación 2026Infinite scroll vs load more
Infinite scroll es ideal para feeds sin fin donde el usuario explora. Load more (botón explicito) es mejor cuando el usuario quiere control de cuanto cargar, busquedas, listas con un número conocido de resultados. Infinite scroll sin detección de fin de lista confunde al usuario cuando ya no hay más contenido, siempre muestra un estado de "no hay más resultados".
investigación 2026Blur-up y LQIP para imagenes
Implementa blur-up para imagenes: 1) reserva el espacio con aspect-ratio para evitar CLS, 2) muestra un placeholder de color dominante o un LQIP de 20px x 20px con blur(8px), 3) carga la imagen real y haz crossfade de 300ms. En listas con muchas imagenes, usa loading="lazy" o IntersectionObserver para no cargar fuera del viewport.
investigación 2026Full-screen loading solo al iniciar
Una pantalla de loading full-screen solo es apropiada al primer arranque de la app cuando se cargan configuraciones criticas. Para cargas subsecuentes, usa skeleton o loading inline dentro del componente que carga. Un loading full-screen que aparece al navegar entre pantallas rompe la ilusión de fluidez y hace la app sentirse lenta.
investigación 2026