Social & Feed UI

Cuando el feed usa infinite scroll, cada lote nuevo de contenido debe mostrarse primero como skeleton placeholders que preserven la altura exacta del contenido real para evitar CLS. Al navegar a un detalle y volver, la posición de scroll debe restaurarse exactamente donde el usuario la dejó, usando sessionStorage o History API. Sin esto, el usuario pierde contexto y abandona.

El gesto de pull-to-refresh es la forma más natural de actualizar un feed en mobile. El spinner debe ser el nativo de la plataforma (no custom) para mantener familiaridad. El threshold de activación debe ser 80px para evitar activaciones accidentales al hacer scroll. El haptic feedback al cruzar el umbral comunica que la acción se registró, reduciendo la incertidumbre del usuario.

Los timestamps deben adaptarse al contexto temporal: "ahora" para menos de 1 minuto, "hace 3m" hasta 59 minutos, "hace 2h" hasta 23 horas, "ayer" para el día anterior, y fecha corta (14 jun) para todo lo demás. El formato largo (14 de junio de 2025 a las 10:32) se reserva para tooltip o vista de detalle. Nunca mostrar timestamps absolutos en el feed principal porque rompen la legibilidad rápida.

Cuando llegan publicaciones nuevas mientras el usuario lee el feed, mostrar un indicador flotante ("3 publicaciones nuevas") que el usuario activa manualmente. Nunca hacer auto-scroll al tope ni inyectar contenido que desplace lo que está leyendo. El auto-scroll rompe el flujo de lectura y genera desorientación, especialmente en feeds con contenido largo. El indicador debe incluir la cantidad exacta de posts nuevos.

Las acciones de engagement (like, comentar, compartir) deben estar siempre visibles debajo de cada post, no escondidas detrás de hover, long-press o swipe. En mobile no hay hover, y obligar al usuario a descubrir gestos ocultos destruye la tasa de interacción. Los contadores junto a cada acción refuerzan social proof y animan la participación. La zona de toque mínima debe ser 44x44px (WCAG).

Las imágenes en cards de feed deben tener aspect-ratio fijo (16:9 o 1:1) definido en CSS para evitar layout shifts al cargar. Nunca estirar ni distorsionar la imagen: usar object-fit:cover. Mientras carga, mostrar un blur hash placeholder que preserve los colores dominantes de la imagen. El blur hash elimina el "flash blanco" y crea percepción de carga instantánea, mejorando LCP perceptual.

Los hilos de respuestas deben usar indentación visual con un máximo de 3 niveles. A partir del cuarto nivel, las respuestas se aplanan al tercer nivel para evitar contenido ilegible en viewports estrechos. Hilos con más de 3 respuestas visibles deben colapsar con un link "Ver N respuestas más" que carga bajo demanda. Cada nivel necesita una línea de conexión vertical para mantener la jerarquía visual clara.

Un feed vacío que solo muestra "No hay publicaciones" es una oportunidad perdida. El estado vacío debe funcionar como onboarding, sugiriendo personas a seguir, temas de interés y una acción primaria para crear el primer post. Mostrar avatares reales y nombres de personas populares con botón "Seguir" reduce la fricción de primer uso. El empty state debe comunicar que el feed se llenará conforme el usuario interactúe.