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. ![]()
Me pregunto cuál será más molesto cuando la red sea deficiente.
¡Great! 
Puedes simular condiciones de red deficientes usando la consola F12 de Chrome, si lo deseas.
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?
Puedo reproducir esto si uso el inicio de sesión con Facebook. Parece que esto causa el parámetro de URL #_=_
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.
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 ![]()
Seguiré trabajando en esto un poco más cuando tenga tiempo, probando con varios temas en ordenadores de escritorio “grandes” y en mis iPhones.
¿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).
Hola, puedes usar esto para desactivar la opacidad. Crea un nuevo componente en el administrador y agrégalo a la sección común. ![]()
body.loading #main-outlet {
opacity: 1 !important;
}
Pero en ese caso, ¿cuál es la ventaja de esto frente al spinner? ¿Solo para ver una barra de carga?
Esto simplemente desactiva el efecto de desvanecimiento. Era la primera versión. Solo el deslizador superior sin efecto de desvanecimiento.
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.
Sí, creo que quizás… Es realmente difícil… Quizás los efectos cambiables serían buenos para todos. ![]()
Personalmente, me gusta mucho con este efecto de desvanecimiento también. ![]()
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.
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.
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;
// }
¡Gracias, Don, eso será suficiente ![]()
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.)

