Deslizador de carga horizontal

Solo un comentario al margen, pero recientemente recordé que XenForo siempre ha tenido una barra de carga. Me alegra ver que Discourse ahora tiene algo similar. :slight_smile:

Me pregunto cuál será más molesto cuando la red sea deficiente.

¡Great! :heart_eyes:

1 me gusta

Puedes simular condiciones de red deficientes usando la consola F12 de Chrome, si lo deseas.

4 Me gusta

Actualización sobre iPhone 6s:

Se ve muy bien ahora con el tema oscuro y muchos otros temas en móviles.

¡Buen trabajo!

Actualización sobre escritorio:

El control deslizante de carga sigue siendo apenas visible en Chromium con monitores ROG de 27" y 34".

¿Podríamos tener una opción de tema para habilitar/deshabilitar según si es móvil o escritorio?

1 me gusta

Quiero decir lo mismo :smiley: ¡Muy buena opción!

1 me gusta

Puedo reproducir esto si uso el inicio de sesión con Facebook. Parece que esto causa el parámetro de URL #_=_

4 Me gusta

He descubierto que desactivar el plugin discourse-topic-list-previews soluciona todos los problemas relacionados con el Loading slider; tan pronto como lo vuelvo a activar, el problema regresa.

No estamos utilizando ningún inicio de sesión de terceros, por lo que parece que esto podría ser un error independiente (o de alguna manera relacionado).

Edición: De hecho, con ambos plugins activados, la página solo permanece borrosa en los temas donde discourse-topic-list-previews ha encontrado una imagen para reemplazar la predeterminada… y en la página de categorías.

2 Me gusta

Tras realizar pruebas en móviles y ordenadores de escritorio con muchos temas, parece que algo como esto ofrece un buen resultado para este increíble control deslizante:

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

Aumentar un solo píxel (de 3px a 4px) en el valor predeterminado se ve genial en móviles; y en pantallas de escritorio más grandes, por encima de 5px queda bien, pero por ahora me he decantado por 7px :slight_smile:

Seguiré trabajando en esto un poco más cuando tenga tiempo, probando con varios temas en ordenadores de escritorio “grandes” y en mis iPhones.

1 me gusta

¿Podemos volver a la primera parte de esto? Después de probarlo en el escritorio, el desvanecimiento al salir resulta más molesto que el control deslizante. Creo que es porque cuando hago clic en un enlace para ir a la página B, espero que la página A desaparezca inmediatamente (como hacía Discourse antes) o que se mantenga hasta que aparezca B (como ocurre con las páginas web).

3 Me gusta

Hola, puedes usar esto para desactivar la opacidad. Crea un nuevo componente en el administrador y agrégalo a la sección común. :slight_smile:

body.loading #main-outlet {
  opacity: 1 !important;
}
5 Me gusta

Pero en ese caso, ¿cuál es la ventaja de esto frente al spinner? ¿Solo para ver una barra de carga?

2 Me gusta

Esto simplemente desactiva el efecto de desvanecimiento. Era la primera versión. Solo el deslizador superior sin efecto de desvanecimiento.

2 Me gusta

Bueno…

La primera iteración no tuvo ningún efecto, por lo que no recibiste ninguna retroalimentación visual al hacer clic en un enlace, salvo el deslizador; esto no era ideal.

Estoy indeciso entre tener la página opaca o la página en blanco al hacer clic. Coincido en que puede ser un poco distraer, quizás sea mejor desvanecerse a 0 al hacer clic… no estoy seguro.

6 Me gusta

Sí, creo que quizás… Es realmente difícil… Quizás los efectos cambiables serían buenos para todos. :slightly_smiling_face:

Personalmente, me gusta mucho con este efecto de desvanecimiento también. :slight_smile:

El único problema con la opacidad 0 es que, en este punto, solo afecta a main-outlet. El header y below-site-header siguen visibles.

1 me gusta

Supongo que estoy expresando mi malestar personal con el efecto de desvanecimiento (al menos en escritorio) @awesomerobot / @david

Me resulta muy, muy difícil leer el texto desvanecido, así que ahora, en cada transición, mi cerebro se ve obligado a leer texto desvanecido por un instante, lo cual resulta un poco agotador.

Quizás si se desvaneciera por completo sería mejor, no lo sé. Parte del problema también es que estoy a 250 ms de distancia, así que, como mínimo, pasaré unos 300 ms esperando, lo que garantiza que habrá tiempo dedicado a mirar letras desvanecidas.

12 Me gusta

Por si acaso,

Comenté la transición del cuerpo (el texto desvanecido) y creo que se ve bien (y quizás se siente más rápido) cuando no hay transición del cuerpo. Da igual una cosa u otra…

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

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

¡Gracias, Don, eso será suficiente :grin:

2 Me gusta

Sí, en móvil pensé que el desvanecimiento mejoraba el deslizador, pero no lo revisé bien en el escritorio antes de que se introdujera el desvanecimiento. (En el escritorio, encontré el desvanecimiento molesto.)

¿Quizás solo habilitar el desvanecimiento en dispositivos móviles? El control deslizante de carga me recuerda mucho a Safari. :slight_smile:

1 me gusta