Deslizador de carga horizontal

@david ¿quizás deshabilitamos todos los clics mientras se carga la nueva página y mostramos el contenido antiguo? Parece un caso límite, pero razonable

@awesomerobot ¿estás satisfecho con el grosor del control deslizante en el escritorio? En mi departamento no hay consenso, así que vamos a probarlo así durante unos días. En móvil, creo que tenemos el equilibrio adecuado.

7 Me gusta

Depende de lo que quieras lograr, creo. Si uno de tus objetivos principales es que “funcione (casi) idéntico al resto de internet”, quizás no quieras hacer esto. En sitios web “normales”, si hago clic muy rápidamente en un segundo enlace después de hacer clic en el primero, se cargará el contenido del segundo enlace.

8 Me gusta

Me encanta este cambio, especialmente con los ajustes posteriores… Me gusta tanto que tengo muchas ganas de que salga en una beta para obtener aún más comentarios.

¿Cuándo podemos incluir esto en el núcleo @david?

9 Me gusta

Sí, supongo que tienes razón… Supongo que apoyo simplemente integrarlo en el núcleo exactamente como está hoy.

Siempre podemos refinarlo a medida que avanzamos, pero lo que tenemos ahora está bastante pulido y funciona muy bien.

8 Me gusta

A mí me parece bien con el grosor actual. Creo que si recibimos quejas de que no es lo suficientemente visible, entonces podemos aumentarlo en 1px más. ¡Estoy emocionado de verlo en el núcleo!

7 Me gusta

¡Suena genial! Todavía hay algunos errores de renderizado que hay que solucionar (por ejemplo, este), pero una vez que los arregle, podríamos incorporarlo al núcleo. Aunque creo que aún preferiría probarlo un poco más en Meta. La implementación actual solo ha estado activa durante 24 horas.

Mirando algunas otras PWA populares:

Servicio Cambio inmediato de toda la página Deslizador Cargador Marcador de posición personalizado
Facebook :white_check_mark: :white_check_mark:
Twitter :white_check_mark: :white_check_mark:
LinkedIn (en algunas páginas) :white_check_mark:
YouTube :x: :white_check_mark:
GitHub :x: :white_check_mark:
:discourse: Discourse antiguo :white_check_mark: :white_check_mark:
:discourse: Discourse con deslizador :x: :white_check_mark:

Por lo tanto, este cambio nos haría más parecidos a YouTube y GitHub, los cuales, en mi opinión, se sienten más como sitios web que como aplicaciones. ¿Es esa la dirección que queremos tomar? :thinking:

15 Me gusta

Creo que sí, encaja con una filosofía de tema predeterminado minimalista y similar a la web. Siempre podemos proporcionar un componente de tema para el spinner o un marcador de posición personalizado si sentimos que queremos experimentar.

Me gusta mucho que este cambio reduzca la cantidad de píxeles que cambian en la pantalla.

Creo que Gmail también utiliza un patrón similar (renderiza la carga en un cuadrado y luego cambia el contenido).

8 Me gusta

Tenemos nuestro control deslizante configurado de la siguiente manera (a continuación). Es cuestión de gusto, pero creo que 4px en móviles es más agradable que 3px; aunque 3px está bien y, desde luego, es aceptable. Sin embargo, en pantallas grandes de escritorio, subjetivamente, se ve mejor a 6px; aunque personalmente prefiero 7px porque quiero que la gente vea el control deslizante y el progreso relativo cuando se carga la página, independientemente de los colores de fondo de cualquier tema; pero si lo reducimos a 6px en una pantalla grande de escritorio, también es muy aceptable. Menos de 6px en pantallas grandes de escritorio lo hace apenas noticeable en monitores de 27 y 34" (con algunos colores de fondo de tema); y dado que el control deslizante indica “cargando”, en mi opinión es mejor pecar por el lado de ser más visible; pero, de nuevo, es muy subjetivo, por supuesto.

height: 4px;
 
@media only screen and (min-width: 960px) {
        height: 7px;
  }
8 Me gusta

Mi (tardío) feedback sobre esta función:

Antes de visitar este tema, ni siquiera noté el cambio, lo cual es… ¡genial! En mi opinión, las buenas funciones son aquellas que se integran perfectamente en la experiencia actual.

Después de prestarle atención a la función, puedo estar de acuerdo en que la menor cantidad de parpadeos en la pantalla es más agradable visualmente que el comportamiento anterior.

¡Felicidades al equipo por el cuidado diseño y la reflexión que pusieron en este cambio! :slight_smile:

13 Me gusta

Hola,

Me encanta este componente, pero encontré un error (pensé que había un conflicto en mi tema, pero puedo verlo aquí también). Cuando hacemos clic en el elemento .navigation-toogle, el menú desplegable permanece abierto:

6 Me gusta

Tal vez mi informe se perdió en el caos (o quizás simplemente no han tenido tiempo de revisarlo aún).

3 Me gusta

Gracias @cosdesign y @seanblue; sigue siendo una prioridad para mí solucionarlo. He creado una lista de ‘problemas conocidos’ en el mensaje original (OP) de aquí para que podamos llevar un registro de lo que queda pendiente.

10 Me gusta

El problema del menú desplegable debería estar resuelto ahora:

8 Me gusta

¡Me encanta este componente! Acabo de instalarlo también en mi foro de Discourse. ¡Gracias!

Una sugerencia: ¿sería posible mostrar un esqueleto mientras la página se carga? En casos en los que la página pueda tardar un momento en cargar, esto puede ayudar a indicar que el clic se ha registrado. Es solo un pequeño detalle que he notado: a veces hago doble clic en el título de un tema porque al principio no veía la barra de carga, mientras que el spinner se mostraba de inmediato.

4 Me gusta

Es un compromiso que adoptamos aquí: optamos por no cambiar nada en la pantalla a menos que hayan pasado 2 segundos y no tengamos contenido que mostrar.

Supongo que podríamos ofrecer algún tipo de interruptor para reducir esos 2 segundos a 1, pero siento que hemos encontrado el equilibrio adecuado aquí.

7 Me gusta

Acabo de volver después de varios días fuera y lo primero que noté es lo lento que se siente todo ahora.

Sé que Google Groups ha introducido algo similar, pero no creo que necesitemos imitar lo que están haciendo. El spinner encajaba mucho mejor con Discourse, en mi opinión; era ágil e incluso ayudó a desmentir el mito de que las aplicaciones Ruby siempre son lentas. Me encantaba y me encantaba lo rápido que parecía Discourse. Lamentablemente, siento que este control deslizante es un gran paso atrás (disculpas a todos los que trabajaron en ello; sé que probablemente no es lo que querían oír, pero creo que todos queremos lo mejor para Discourse, así que espero que no les importe que comparta lo que siento al respecto).

2 Me gusta

Cuando lancemos esto en el núcleo, proporcionaremos un componente que permita el modo de transición anterior.

Hemos escuchado sus comentarios, pero ustedes representan una minoría extrema; la mayoría de los usuarios prefiere el nuevo estilo de transición. El nuevo estilo implica que cambien menos elementos en la pantalla.

Antiguo

Hacer clic → pantalla blanca → contenido

Nuevo

Hacer clic → contenido

Entiendo que a algunas personas pueda gustarles una pantalla blanca con un indicador de carga, pero esta es una opinión minoritaria.

11 Me gusta

No se trata de amar o no una pantalla blanca, Sam, sino de la sensación de velocidad.

De hecho, siempre he considerado que la velocidad (y la sensación) de Discourse era una de sus características más impresionantes, y sé que incluso quienes estaban bastante en contra de Ruby quedaron impresionados por lo que lograste con Discourse.

También creo que esa sensación de velocidad es más importante ahora que nunca, porque competimos constantemente con sitios gigantes como Twitter y Discord, y pienso que incluso una ligera sensación de lentitud podría tener un impacto, aunque sea subconsciente.


Es genial que habrá un componente para el modo de transición antiguo, pero mi preocupación es que podría añadir una sobrecarga que provoque una ralentización (aunque sea pequeña), anulando así los beneficios de la forma antigua/el spinner. Si esto no va a ser así, estaré encantado con ello… pero sigo pensando que este movimiento será perjudicial para todos los demás sitios de Discourse que hay ahí fuera.

4 Me gusta

Estoy totalmente de acuerdo con la percepción de la velocidad.

Si el spinner permaneciera en pantalla durante demasiado tiempo, indicaría un problema (aunque el spinner no sería el problema en sí) y quizás sería menos informativo que una barra de progreso deslizante.

Las barras deslizantes indican lentitud subyacente. Me recuerdan a esas antiguas barras de progreso de Windows (tiempo estimado restante: 6 días 23 horas). Cuando las veo, pienso que debe haber un problema de velocidad y que están ahí para reducir mi impaciencia. Esta siempre parece detenerse ligeramente alrededor del 80 %, lo que me hace pensar que algo ha salido mal, cada vez.

Si el foro es rápido, la barra deslizante no es una buena idea.

4 Me gusta

Cuanto más uso Meta, más creo que prefiero el antiguo spinner. El control deslizante simplemente no es lo suficientemente visible, lo que hace que el sitio web se sienta poco receptivo.

2 Me gusta