Deslizador de carga horizontal

¡Se ve bien!

Al hacer clic en los enlaces de este menú (fuera de los menús desplegables), aún se muestra el spinner:

1 me gusta

Actualmente está configurado a 2px, pero si usas una pantalla de alta densidad de píxeles (HiDPI) con escalado (por ejemplo, un MacBook Retina), podría terminar viéndose más cercano a 1px en tu pantalla. Lo aumentaré a 3px hoy.

Tienes razón, en este momento la experiencia de usuario es algo inconsistente. Es un tema complicado desde el punto de vista técnico. El indicador de carga está actualmente conectado al enrutador de Ember, por lo que solo aparece durante las transiciones de ruta de Ember. Algunos estados de “carga” dentro de la interfaz no son realmente transiciones de ruta de Ember… tendremos que pensar cómo podemos hacer esto más consistente.

9 Me gusta

Espero con gran interés el soporte para DPI alto. ¿Quizás ofrecer a los administradores del sitio la opción entre el control deslizante de carga y un círculo giratorio renovado (tos tos :wink:)?

1 me gusta

Ahora se ha aumentado a 3px, por lo que debería ser un poco más evidente.

Los administradores pueden personalizar todo a través de un componente de tema, por lo que si los sitios desean mantener un indicador de carga giratorio, eso será posible :slight_smile:

12 Me gusta

@meghna publicó Custom Loading Spinner Component, que es una excelente forma de aprovechar los iconos SVG de FontAwesome, los cuales funcionan a cualquier nivel de DPI.

7 Me gusta

Me encanta absolutamente esto y estoy de acuerdo con @codinghorror en que debería integrarse en el núcleo como opción predeterminada.

20 Me gusta

Creo que ya solucioné eso: el indicador de carga debería haber desaparecido de todas las vistas de la lista de temas.

9 Me gusta

En el iPad, el control deslizante de carga no se muestra en absoluto. (iPad de 5.ª generación… creo. iOS 14, aplicación DiscourseHub)

image

Véase el GIF ^

5 Me gusta

Buen hallazgo, gracias @CaptainZac. Realicé algunos ajustes para que ahora funcione en la vista PWA/DiscourseHub en el iPad.

También agregué el valor de top de 1px que necesitamos para DiscourseHub en el iPhone. Ahora la altura completa de 3px es visible en la aplicación y parece coincidir razonablemente bien con la propia barra de carga de DiscourseHub.

7 Me gusta

Me gusta mucho :+1: ¡Muy buen trabajo! :slightly_smiling_face:

2 Me gusta

Parece que el indicador de carga no se activa en lugar del cargador de spinner en la página de inicio al hacer clic en el logotipo.

4 Me gusta

Perfecto, ¡empieza a usarlo! Gracias.

2 Me gusta

Debería estar resuelto ahora, ¡gracias!

7 Me gusta

El problema con los carruseles es que pueden parecer más lentos (incluso si la página carga más rápido).

La razón es que nada ocurre en la mayor parte de la página hasta que esta ha terminado de cargar; esto contrasta con la versión del spinner de carga, donde la página se queda en blanco inmediatamente después del clic; es decir, algo significativo ocurre de inmediato frente a algo significativo que ocurre tras un retraso.

6 Me gusta

Sí, eso es cierto, y es algo que también hemos estado discutiendo internamente. Mantener todo el contenido antiguo en pantalla significa que no hay retroalimentación inmediata al hacer clic en un enlace. Acabo de implementar un cambio que (parcialmente) desvanece el contenido de la página durante la carga. (cc @awesomerobot)

Originalmente, lo tenía desvanecido por completo, pero entonces solo nos quedábamos con una página en blanco. Creo que dejarlo al 20% de opacidad podría ser un buen punto medio. ¿Suficiente retroalimentación, pero no demasiado brusco? :thinking:

Por ahora, está desvaneciendo todo el #main-outlet. Desafortunadamente, no creo que haya forma de apuntar al {{outlet}} de la ruta que realmente se está cargando… pero me encantaría que me demostraran lo contrario. Creo que la única solución sería reemplazar todos los {{outlet}} en nuestro código con algún componente envoltorio personalizado…

18 Me gusta

Mejorando cada vez más… :sunglasses:

7 Me gusta

Juego de otro nivel: registra cuánto tardan las solicitudes en promedio y haz que la animación de desvanecimiento dure lo mismo :rofl:

14 Me gusta

Genial. Parece mucho mejor. :100::+1:

3 Me gusta

Es mejor, David… pero aún ‘se siente’ más lento. No estoy seguro de que eso vaya a cambiar a menos que el efecto sea tan evidente como con el spinner, a decir verdad. También podría ser simplemente una característica del control deslizante, especialmente si siempre se completa. Esto se debe a que la página habrá terminado de cargarse (o parecerá haber terminado de cargarse) antes de que el control deslizante finalice… sin embargo, será el control deslizante el que indique que la página ha cargado y no la página en sí, debido a lo llamativo que es.

6 Me gusta

https://meta.discourse.org/u/golaxo/summary
Si hacemos clic desde la vista de un perfil en el logotipo de Discourse, la parte superior desaparece, lo cual se ve extraño.

3 Me gusta