Product Craft Bible
Loading States Mobile
Inicio Mobile Loading States Mobile
Mobile

Loading States Mobile

6 reglas investigación 2026
154

Loading States Mobile

6 reglas
1325

Skeleton 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 2026
Preferir
Evitar
Mensajes
Cargando... Por favor espera
1326

Spinner 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 2026
Preferir
Mi perfil
Nombre
Ana Garcia
Email
ana@email.com
Guardando...
Acción puntual < 3 s
Evitar
Feed (300 items)
Cargando... Sin progreso ni contexto de estructura
1327

Pull 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 2026
Preferir
Actualizando...
Noticias
Nuevo lanzamiento v2.4 Hace 5 min
Mantenimiento programado Hace 1 h
Evitar
Noticias
El contenido salta sin confirmación
1328

Infinite 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 2026
Preferir
Resultados de busqueda 20 de 847
Reporte Q1 2026 PDF, 2.4 MB
Contrato marco servicios DOCX, 840 KB
Presupuesto operativo XLSX, 1.1 MB
Cargar 20 más
Evitar
Resultados de busqueda
Reporte Q1 2026 PDF, 2.4 MB
Contrato marco servicios DOCX, 840 KB
Presupuesto operativo XLSX, 1.1 MB
Cargando más resultados...
El footer es inalcanzable
1329

Blur-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 2026
Preferir
Galeria
LQIP con blur-up crossfade 300ms
Evitar
Galeria
vacio
vacio
vacio
vacio
Espacio en blanco parece contenido roto
1330

Full-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
Preferir
Explorar
Precio Distancia Rating
Resultados
Loading inline, UI sigue interactiva
Evitar
Explorar
Precio Distancia Rating
Filtrando... No puedes interactuar con nada