Deslizador de carga horizontal

He visto otros sitios web que mantienen la página actual completamente visible mientras se carga la otra y la barra de carga avanza por la pantalla. Quizás valga la pena probar esa versión.

Quiero añadir una cosa más. Creo que he notado otra gran diferencia entre Discourse y algunos otros sitios web que utilizan una barra de carga. Los tres sitios web con los que estoy comparando son https://www.youtube.com, https://github.com y https://bookmeter.com. Aquí están las diferencias clave:

1. Como mencioné en mi publicación anterior, en lugar de cambiar el contenido que se va a reemplazar por una página en blanco, estos sitios web mantienen el contenido anterior en pantalla (sin desvanecimiento ni nada similar) hasta que se haya cargado el nuevo contenido.

2. Generalmente, mucho más contenido permanece en pantalla incluso después de que se haya cargado la nueva página. Estos sitios web tienen mucho más contenido en el menú superior y, a veces, incluso tienen un menú superior secundario que puede permanecer dependiendo del enlace en el que se haya hecho clic. También tienen menús laterales que a veces también permanecen después de navegar a una nueva página. Por otro lado, Discourse tiene un menú superior muy simple, y solo el icono de búsqueda, el icono de menú hamburguesa y el icono de usuario siempre permanecen.

Quizás cambiar el comportamiento para mantener el contenido antiguo hasta que el nuevo esté listo funcione bien. Pero también es posible que no funcione bien simplemente porque se está reemplazando una gran cantidad de contenido, sin importar a dónde navegues en Discourse.

En mi caso, utilizo banners de categorías, banners de etiquetas y una barra lateral que muestra las categorías en las listas de temas. Discourse, por defecto, también tiene algunas rutas que mantienen las barras superiores o laterales, como los perfiles de usuario o los grupos. Prefiero mucho mantener la vista anterior antes de la transición, para que estos elementos en pantalla no se oculten solo para aparecer de nuevo en el mismo lugar.

Sí, así es como utilizamos el nuevo componente de tema deslizante de Discourse, desde hace aproximadamente una semana, y nos encanta. Simplemente desactivamos el código de transición del cuerpo y solo usamos el deslizante.

La acción natural del navegador al cargar (o recargar) una página se encarga de la transición; por lo tanto, no se requiere código adicional para desvanecer o dejar en blanco ningún HTML. Este deslizante se ve genial sin ningún código de transición de página adicional (desvanecido, en blanco, etc.) y así es como lo hemos estado ejecutando en nuestro sitio durante una semana.

Gracias por este excelente deslizante y por la capacidad de personalizarlo como un componente de tema.

Quizás malinterpretaste lo que escribí, pero lo que describí no es cómo funciona actualmente Discourse con el componente de tema. En este momento, Discourse deja la mayor parte del contenido en una página en blanco mientras se carga el nuevo contenido. Los otros sitios web que enlucé mantienen el contenido actual mientras se carga el nuevo contenido. Esto no es lo mismo.

Estoy bastante seguro de que entendí exactamente lo que mencionaste, @seanblue (arriba). Es bastante simple lo que dijiste, y en mi opinión, tu publicación fue fácil de entender.

Si comentas la transición del cuerpo en SCSS (la animación) en el componente original del tema deslizante de Discourse (por cierto, modifiqué el componente del tema bifurcándolo hace una semana, pero hay otras formas de modificar un componente de tema).

Entonces, el comportamiento es exactamente como lo describes.

La página actual (en nuestra modificación) se muestra mientras se carga el nuevo contenido (lo cual es simplemente el comportamiento normal de una página cargando sin ninguna animación adicional en el cuerpo). El “desvanecimiento” y el “en blanco” que ves en los experimentos actuales de Discourse se debieron al código de animación del cuerpo en CSS en la versión del tema (véase a continuación) cuando se lanzó hace una semana.

Sin la animación del cuerpo en CSS, el control deslizante de carga sigue su curso normal y no hay “en blanco” ni “desvanecimiento” en el cuerpo porque esa animación estaba especificada en el CSS del componente del tema (original). La mayoría de los sitios web (como mencionas) no agregan animación adicional al cuerpo, y por eso dijiste:

Esto es “lo normal”… lo cual ocurre después de eliminar la animación del cuerpo del CSS (estoy hablando del lanzamiento de hace una semana, ya que no he estado siguiendo, es decir, GitHub dice que nuestra versión modificada es:

Después de realizar este cambio, hace una semana, el control deslizante se ve genial (así lo dicen nuestros usuarios) y no requiere ninguna animación adicional en el cuerpo (desvanecimientos hacia adentro o hacia afuera, animaciones de en blanco, etc.).

A continuación estaba el CSS que comentamos en el “lanzamiento inicial” de este genial control deslizante. Esto funcionó tan bien para nosotros (y a nuestros usuarios les encanta), por lo que no hemos estado siguiendo todos los cambios posteriores en el código de experimentos de “giradores combinados, en blanco”, animación del cuerpo, después de hacerlo funcionar bien para nosotros; excepto por los resultados que veo con experimentos en meta).

// body #main-outlet {
//   transition: opacity 0.2s ease;
// }

// body.loading #main-outlet {
//   opacity: 0.2;
//   transition: opacity var(--loading-duration) ease;
// }

Espero que esto ayude.

Ah, no me había dado cuenta de que estabas usando una versión bifurcada/modificada. Mi culpa. Me alegra que esta versión te esté funcionando bien. Ojalá intenten ese enfoque aquí en Meta también.

@david / @awesomerobot Sé que hemos ido y venido sobre esto varias veces, pero creo que deberíamos probar la implementación original (con un ligero refinamiento) antes de desvanecerla. Permíteme resumir las opciones que tenemos al hacer clic:

1. Mantener el contenido antiguo en pantalla y cambiar al nuevo una vez que esté listo.

2. Mostrar una “pantalla en blanco” y cambiar al nuevo contenido una vez que esté listo.

3. Transicionar a un contenido opaco (en cualquier punto entre 0 % y, digamos, 40 %) y cambiar al nuevo contenido una vez que esté listo.

Con todas estas opciones, también estamos seguros de que queremos agregar lo siguiente: “Si el contenido tarda más de 2 segundos, mostrar un indicador de carga (spinner)”.

(1) es la única solución que minimiza los estados de transición. Sí, requiere un poco de acostumbrarse: “Oye, hice clic en algo y parece que no ha pasado nada”. Pero así es como funciona la web de todos modos cuando haces clic en un hipervínculo. El navegador no muestra una pantalla en blanco ni desvanece nada cuando haces clic en un enlace a otro sitio.

(2) es lo que tenemos ahora y algunos lo consideran demasiado brusco, porque una de las mayores ventajas de este patrón es que evitamos las pantallas en blanco. Es solo un cambio muy, muy pequeño en comparación con el antiguo spinner.

(3) puede ser muy distractor; encontrar la opacidad adecuada es difícil. Por experiencia, cuando lo probé, resultó extremadamente agotador después de una hora de uso.

@david le dimos una oportunidad seria a la opción (2), ¿podemos ahora darle una oportunidad seria a la opción (1) durante, digamos, una semana? Creo que probablemente sea la mejor, ya que minimiza los cambios en pantalla.

Esto… no es cierto. Hay una animación de carga que comienza inmediatamente al hacer clic. Observa la pestaña de tu navegador mientras haces clic en un enlace. Fíjate que al hacer clic o tocar, cambia inmediatamente del icono de la pestaña al indicador de carga.

Lo siento, sí, ese era mi punto aquí: podemos simular algo muy cercano a la navegación “estándar” (por ejemplo, podemos cambiar el icono de la pestaña mientras se carga, podemos cambiar el texto de la pestaña).

Cuando haces clic en un enlace arbitrario en un sitio, la página actual no se vuelve 100% blanca ni se vuelve opaca. El contenido antiguo permanece en la pantalla durante un período de tiempo hasta que se resuelve el DNS para el nuevo sitio y el contenido está listo para renderizarse.

Para mí, la gran ventaja de este componente radica en reducir los estados intermedios. Si podemos hacer que “se sienta” como la navegación estándar del navegador fingiéndolo, sería genial.

No te preocupes. Realmente nos gusta el control deslizante (con unos pocos píxeles añadidos para escritorio); pero descubrimos que no había necesidad de animaciones en el cuerpo (desvanecimiento, aparición/desaparición, o cualquier otra).

El control deslizante indica la carga de manera adecuada; y la página se cargará y cambiará, naturalmente, sin necesidad de agregar transiciones CSS en el cuerpo ni spinners adicionales. Hemos estado usándolo así durante 8 o 9 días, y los usuarios están contentos, y a mí también me gusta. A los usuarios no les gustaron las animaciones de “desvanecimiento”, ni las de “desvanecimiento de la página”, ni las de “spinner adicional + animación del control deslizante”; pero, por otro lado, nuestros usuarios en general no están muy entusiasmados con animaciones innecesarias y extras elementos web.

Espero que el equipo de meta mantenga este código como un componente del tema, o al menos permita a los propietarios de sitios anular lo que decidan implementar; ya que parece que lo que a nuestros usuarios les gusta y lo que a otros les gusta, en cuanto a transiciones de página, es diferente.

Cuando haya dudas, “ser suave y dar a los sitios la capacidad de elegir” es un buen enfoque, creo yo.

suena bien, he revertido el componente a su implementación original

Creo que lo de «oh no, pasaron 2 segundos, mostrar un spinner» es definitivamente algo menor pero importante de añadir.

Salvo eso, veamos qué dice la gente; creo que esta es probablemente la versión que lanzaremos.

¿Dónde debería mostrarse? ¿Como algún tipo de modal? ¿O debería ocultarse #main-outlet después de 2 s para dar paso a un indicador de carga?

Estoy pensando en ocultar la salida principal. Quizás debamos ajustar el umbral; 2 es un poco arbitrario, ¿quizás 3, 4, 5?

El indicador de carga se mostrará ahora después de 2 s:

Eso es bastante genial; sin la capa adicional de spinner después de 2 segundos, las cosas se pondrían extrañas para los usuarios. De esta manera, obtenemos lo mejor de ambos mundos: 1. Hacerse pasar por ultrarrápido gracias al control deslizante (aquí estamos haciendo trampa, TBO). 2. Llenar el vacío si la carga se queda atascada (transición psicológica).

¡Bien hecho!

Acabo de probarlo en una red lenta simulada y, después de 2 segundos, el spinner se siente definitivamente bien para mí. Quiero reiterar que en el escritorio (al menos en un monitor bastante grande), la barra de carga es prácticamente inexistente. Creo que otros 2-3 píxeles en vertical marcarían una gran diferencia.

He estado siguiendo esta conversación, ya que soy un usuario nuevo en Discourse. Debo decir que estoy muy impresionado con el nivel de reflexión y esfuerzo que se está dedicando a esta función de UX tan “moderna”. Disculpen si me desvío del tema… pero es una conversación muy impresionante para alguien que ha utilizado otro software de foros durante años.

Sigan con el gran trabajo… me encanta esta función.

Tal vez debería mencionar que acabo de hacer clic en un tema después de haberlo hecho ya, porque pensé que había hecho un clic accidental, aunque estaba cargando desde el primer clic. Probablemente solo necesite acostumbrarme a la falta del indicador de carga…