¿Lograr la misma transición de desvanecimiento de página que NodeBB?

Desarrollador
1

Hola.
Una cosa que me gusta más en NodeBB que en Discourse es el efecto de transición de página.
La diferencia principal es que en Discourse, el HTML del contenido se elimina tan pronto como haces clic en un enlace, mientras que en NodeBB, el contenido se mantiene hasta que el nuevo contenido está listo para mostrarse, permitiendo un agradable efecto de desvanecimiento en el contenido mientras se carga la siguiente página.

¿Sería posible una modificación así? ¿Requeriría una programación extensa?

2

¡Me encanta la idea! :bulb: :heart: (pero, siendo sincero, podría resultar molesto bastante rápido? :wink: )

Sí, se puede hacer.

Una forma es sobrescribir el componente Topic List de la siguiente manera:

api.modifyClass('component:topic-list',  {
        @on('init')
        setup() {
           $("#list-area").fadeOut(0);
        },  
        @on('didRender')
        completeRender(){
          $("#list-area").fadeIn(600);
        }
    }
)

Acabo de probar esto en TLP y funciona, pero los cambios están entre sobrescrituras existentes de este componente, así que disculpa si hay algún error tipográfico arriba; simplemente eliminé todo lo demás innecesario de TLP.

Me tentaría añadir esto como una opción gratuita para TLP :smiley:

Nota: esto no soportará la página de Categoría por el momento; tendrás que desarrollar la idea más a fondo.

3

¡Lo intentaré, gracias!

4

Hola, probé la función en tu complemento, pero no es exactamente lo mismo: cuando muestro la lista de temas, es el contenido solicitado el que aparece suavemente tras cargarse; en NodeBB, es el contenido actual el que se desvanece mientras se carga el siguiente.

Lo principal es que debemos encontrar una forma de evitar que Discourse elimine el HTML actual inmediatamente después de hacer clic en un enlace. El HTML debe permanecer en su lugar hasta que se haya cargado el nuevo contenido (o hasta que termine el efecto de desvanecimiento, aunque no estoy seguro de que eso sea mejor :upside_down_face:) y esté listo para mostrarse.

5

Hmmm, vale. Lo que proporcioné es entonces el 50% de lo que estás describiendo ahora (de la animación, si no del esfuerzo de programación). Básicamente, estás pidiendo retrasar el desmontaje y reemplazar el spinner con un desvanecimiento. Sin embargo, no estoy convencido de que tu suposición sobre lo que ocurre en el otro sistema sea correcta. Ciertamente, no hay forma de predecir cuánto tardará en cargarse los datos con una llamada asíncrona, por lo que el desvanecimiento no estará perfectamente sincronizado, incluso si eso es lo que parece estar ocurriendo. Quizás haya un breve retraso cuando las cosas están en blanco. Siéntete libre de seguir adelante, resolver el resto y compartirlo, aunque eso no será una tarea trivial ya que el spinner de Discourse aparece en la nueva ruta, no al final de la anterior. actualización: no, no es así. Está en su propio pequeño div que se hace visible según sea necesario. Algunas notas adicionales: el contenedor de la lista se oculta poco después de la acción de clic, lo que parece desmantelar inmediatamente el área de la lista (posiblemente una optimización implícita de Ember, aunque no estoy seguro). Sería necesario cambiar ese comportamiento desde el principio.

6

Por supuesto, no lee el futuro :rocket:. El desvanecimiento en NodeBB parece durar unos 200 ms. Si la página tarda más en cargarse, te encontrarás con una pantalla en blanco.

Y sí, tienes razón, la idea es básicamente reemplazar el spinner por un desvanecimiento de duración fija. :slight_smile:
Si el tiempo de carga es más rápido que el desvanecimiento, este debería interrumpirse para permitir que se muestre el nuevo contenido.

La programación no es mi habilidad principal y no sé cómo funciona Discourse, así que no estoy seguro de que lo logre, pero vale la pena echarle un vistazo.

¡Gracias por tus consejos y sugerencias!