¡Se ve genial, David! Una sugerencia: ¿sería posible mantener la barra avanzando (quizás a un ritmo más lento) en lugar de que se detenga a la mitad, incluso si está esperando una respuesta? Podría avanzar más lentamente del 40% al 70% y quizás detenerse si no hay respuesta.
Ocultar esa breve pausa haría que se sienta más responsiva e instantánea, en mi opinión 
Actualmente, parece avanzar más lentamente durante 5 segundos antes de detenerse en un 80% de ancho.
Aquí simulé una conexión a Internet muy, muy lenta:
SCSS actual:
.loading-indicator-container {
--loading-duration: 5s;
--loading-function: cubic-bezier(0, 0, 0, 1);
--done-duration: 0.4s;
--done-function: ease;
--fade-out-duration: 0.4s;
position: fixed;
top: 0;
left: 0;
z-index: 1001;
height: 3px;
width: 100%;
opacity: 0;
transition: opacity var(--fade-out-duration) ease var(--done-duration);
background-color: var(--primary-low);
}
.loading-indicator-container .loading-indicator {
height: 100%;
width: 100%;
width: 0%;
background-color: var(--tertiary);
}
.loading-indicator-container.loading {
opacity: 1;
transition: opacity 0s;
}
.loading-indicator-container.loading .loading-indicator {
transition: width var(--loading-duration) var(--loading-function);
width: 80%;
}
.loading-indicator-container.done .loading-indicator {
transition: width var(--done-duration) var(--done-function);
width: 100%;
}
body.discourse-hub-webview .loading-indicator-container {
top: 1px;
}
body.footer-nav-ipad .loading-indicator-container {
top: 49px;
}
body.loading #main-outlet {
opacity: 0.2;
transition: opacity 0.2s ease;
}
Hmm, en mi caso se detiene alrededor del 40%, pero una barra en movimiento, aunque sea más lenta, sería mejor que una pausa, creo.
Además, en relación con el desvanecimiento: ¿quizás desvanecer el contenido actual y hacer aparecer el nuevo haría que parezca más rápido (si es posible dirigir la salida para la ruta de carga)?
Hay dos cosas ocurriendo…
@Canapin tiene razón en que la animación inicial termina a los 5 segundos en el 80%… así que en una conexión lenta se quedará atascada allí y no se completará hasta que estés en la siguiente página.
El caso de @P16 es lo que experimento en una conexión más rápida… una vez que ocurre la transición fuera de la página actual, la animación se detiene brevemente donde quiera que haya estado… y reanuda un segundo después en la nueva página (aquí he exagerado la altura de la barra para que sea visible).
Estoy de acuerdo en que mantener algún movimiento en curso es ideal, pero podría no ser posible sin cambiar completamente la forma en que está implementado…
No creo que el desvanecimiento hacia adentro ayude mucho… no puedes desvanecer el contenido hacia adentro hasta que lo tengas, así que de esa manera retrasas ligeramente su aparición. Supongo que es posible que pueda crear una ilusión de velocidad, ¡pero técnicamente será más lento por el tiempo que dure la animación de desvanecimiento hacia adentro!
Acabo de darme cuenta de que puedes probar el desvanecimiento hacia adentro (más o menos) con el componente de la tabla de contenidos (porque desvanece hacia adentro la publicación), por ejemplo… visita: PostgreSQL 13 update. No creo que se sienta particularmente más rápido… pero definitivamente es “más suave”.
¡Oh! Creo que eso está ocurriendo porque el contenido sí se cargó y hubo un gran retraso en el análisis de HTML, la cascada de estilos, el diseño y el renderizado, durante el cual la animación no pudo moverse.
.loading-indicator-container .loading-indicator, .loading-indicator-container {
background-color:#FFCC00;
}
Intenté cambiar el color en el CSS del tema, pero se mantiene azul. ¿Alguna ayuda?
Sí, exactamente. La naturaleza de un solo hilo del renderizado de JS/DOM significa que perdemos muchos cuadros mientras se renderiza un tema 
. El deslizador está ‘moviéndose’ todo el tiempo, solo que los cuadros nunca se renderizan.
Gracias. Acabo de arreglar eso en el núcleo, así que se solucionará aquí en Meta muy pronto.
Haré que haya un desvanecimiento de entrada en Meta hoy para que podamos ver cómo se siente. Aunque, por supuesto, si hacemos eso, querremos eliminar otros desvanecimientos de entrada, como el componente de la tabla de contenidos.
Edición: eso está hecho. Desvanecimiento de entrada activado en Meta.
Dependiendo del orden en que se carguen tus temas/componentes, eso podría no funcionar. Necesitas hacer que el selector sea ‘más específico’ que el CSS del componente del deslizador de carga. Lo más sencillo es probablemente agregar !important al background-color. También querrás eliminar el selector del contenedor, de lo contrario el fondo será igual que el primer plano:
.loading-indicator-container .loading-indicator {
background-color:#FFCC00 !important;
}
¡Gracias, David, se ve genial!
Ahora toma el promedio de las últimas 5 cargas de página y lo utiliza para establecer la velocidad de la barra
Hola David,
Este cargador está mejorando cada vez más Sigue con el gran trabajo.
Con esta nueva actualización, parece más dinámico
Acabo de notar algo sobre esto en la categoría. Uso el botón “Crear tema” para renombrar. 
Con el Deslizador de Carga, no se actualiza el texto del botón. Lo noté porque podría causar problemas con otros scripts.
Demo (en este video hago clic en una categoría que tiene otro texto para crear un tema y luego voy a otra categoría que tiene el botón predeterminado de crear tema.) Después de recargar toda la página, muestra el texto correcto.
La desvanecida de entrada/salida es una mejora. Pero sigo encontrando el control deslizante una distracción. Me encuentro mirándolo, lo que significa que tardo más en estar listo para leer la página cuando se carga. Con el spinner, estaba en un solo lugar, por lo que era fácil no mirarlo, y lo repentino me hace pensar en velocidad (quizás incorrectamente).
Es posible que en conexiones lentas el control deslizante sea mejor, ya que te da una idea de qué tan lenta o rápida es la carga de la página. No lo sé con certeza.
Para mí, al usar un teléfono móvil, el control deslizante se encuentra en la parte superior de la pantalla, mientras que el anterior estaba más en el centro de la pantalla, aproximadamente al 30% desde la parte superior…
En lugar de mantener la vista centrada en el medio del teléfono, obligan a moverla arriba y abajo, arriba y abajo… solo mi opinión…
Estoy de acuerdo con esto. Creo que lo mejor sería que el Loading Slider funcione solo en escritorio y que en móviles se mantenga el spinner. El spinner da más la sensación de usar una aplicación, lo cual es bueno en móviles. Es igual que YouTube con sus loaders.
Sí, lo he estado usando en un iPhone, así que mis comentarios se referían realmente a la versión móvil.
Me encanta el concepto. Soy un gran fanático de los deslizadores frente a los giradores.
Lo activé y lo probé en muchos temas (Oscuro, Alien, Vincent, Star Wars, etc.) en monitores ROG de 27" y 34". Apenas podía ver el deslizador de carga. Parece muy delgado. En los temas “oscuros”, la línea delgada parecía tener un color demasiado suave para notarla realmente.
También probé el deslizador en dispositivos móviles, iPhone 6s y iPhone 6+. Comentarios similares. Apenas perceptible.
Trato de no ser el que arruina la fiesta, pero objetivamente hablando, el deslizador parece prometedor, pero necesita trabajo adicional en CSS (en mi opinión). Por ahora, volvimos al girador en nuestro sitio, ya que es visible y cuenta la historia de “recarga” de manera clara. Cuando tenga tiempo, lo volveré a activar y trabajaré en el CSS de nuestro sitio, ya que esto parece realmente prometedor.
¡Se ve muy prometedor!
Gracias y ¡sigan con el buen trabajo!
PD: No hay problemas de velocidad. Estoy conectado (casi directamente) a nuestra red troncal de fibra nacional, mediante una conexión de fibra dedicada a la red troncal principal.
Solo quiero mencionar que no me gusta mucho el nuevo comportamiento de UX al seleccionar categorías, temas, etc., donde la vista actual se desvanece antes de que cargue la nueva página. Creo que el enfoque anterior, de simplemente tener una página en blanco con un indicador de carga, era una experiencia mucho mejor.
En cualquier caso, la página cambia dos veces. Pero como los indicadores de carga son elementos universales, no se sentía realmente que la página cambiara dos veces. Parecía que se estaba preparando para cambiar y luego cambiaba una sola vez. Ahora se siente como si cambiara dos veces, porque aún hay contenido después de ambas transiciones: una vez desvanecido y otra vez con el contenido de la nueva página. Es difícil precisar exactamente por qué no me gusta, pero creo que es porque ya no hay una vista de carga universal. Ahora hay efectivamente un número infinito de vistas de carga diferentes, y encuentro que la vista de carga de desvanecimiento seguido de carga es distractora, ya que el contenido de fondo es diferente cada vez que paso a una nueva página.
Algunas cosas que utilizan los hooks didInsertElement necesitarán actualizarse, sí. Con el antiguo spinner, todos los elementos de la página se destruían y volvían a crearse. Con este nuevo sistema, Ember reutilizará los elementos si es posible. Lo cual podría hacer el renderizado un poco más rápido, pero podría generar algunos errores si las personalizaciones no siguen los patrones normales de Ember. Tendremos que revisar y corregir esos problemas a medida que los detectemos.
¿Tienes el código de tus personalizaciones en un repositorio de git que puedas compartir?
Esa es la razón principal por la que quiero seguir experimentando con esto como un componente de tema por un tiempo más: podremos detectar la mayor cantidad de problemas posible antes de integrarlo en el núcleo.
Claro, aquí está el repositorio. Gracias
Creo que hay un error en la versión móvil (al menos en iPhone) con esta nueva función. Si seleccionas “Últimos” en el menú desplegable de navegación, al cargar la página el menú desaparece correctamente. Pero si seleccionas “Nuevos” o “Sin leer” (posiblemente otros también), el menú sigue visible. No ocurre el 100% de las veces, pero con suficiente frecuencia como para que sea fácil reproducirlo. Cabe mencionar que esto ocurría a veces con la versión anterior, pero solo con “Últimos” y nunca con “Nuevos” o “Sin leer”.
Gracias @Don. He probado esto y creo que es una mejor manera de hacerlo, lo cual debería funcionar con el nuevo control deslizante: https://github.com/VaperinaDEV/category-btn-name/pull/1 (perdona si he cometido algún error en húngaro). Ese tipo de patrón debería ser útil si otros necesitan actualizar sus componentes también (usando propiedades computadas en lugar de didInsertElement y JQuery).
añadido a mi lista para investigar, gracias