¿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 gusta
2

Love the idea! :bulb: :heart: (but tbh, might get annoying pretty fast? :wink: )

Yep can be done.

One way is to override the Topic LIst component something like as follows:

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

I just tested this on TLP and it works, but the changes are in amongst existing overrides of this component, so apologies if there is typo above I merely stripped out all the other unnecessary TLP stuff.

Tempted to add this as a gratuitous option to TLP :smiley:

NB this won’t support the Category page at present, you will need to develop the idea further.

5 Me gusta
3

I’ll try this, thank you!

1 me gusta
4

Hi, I tried the feature in your plugin, but that’s not quite the same: when I display the topic list, that’s the requested content which fades in after being loaded; on NodeBB, it’s the current content that fades out while the next content is being loaded.

The main thing is that we should find a way to prevent Discourse removing the current HTML immediately after clicking a link. The HTML should be kept in place until the new content has been loaded (or until the fade out effect has ended but I’m not sure that’s better :upside_down_face:) and is ready to be displayed.

1 me gusta
5

Hmmm, ok. What I provided is then 50% of what you are now describing (of the animation, if not the programming effort!). You are essentially asking to delay the tear-down and replace the spinner with a fade out. However, I not convinced you are correct in your assumption about what is going on on the other system. There’s surely no way one can predict how long it will take to load the data with an asynchronous call so the fade out won’t be perfectly synced even if that’s what appears to be happening. Perhaps there’s a short delay when things are blank. Feel free to follow up and work out the rest and share though that’s not going to be a trivial task since Discourse’s spinner appears on the new route not the end of the old one. update: no, it does not. It’s in its own little div which is made visible as required. Some additional notes: the list container is hidden shortly after the click action, which seems to immediately dismantle the list-area (possibly an implicit Ember optimisation though not sure). One would need to change that behaviour to start with.

3 Me gusta
6

Of course it doesn’t read the future :rocket: . The fade out on NodeBB seems to be about 200ms. If the page takes longer to load, then you’ll contemplate a blank screen.

And yes you’re right, the idea is basically replacing the spinner by a fixed duration fade out. :slight_smile:
If the loading time is faster than the fade out, then the fading should be interrupted to let the new content to be displayed.

Programming isn’t my primary skill and I don’t know how Discourse works, I’m not sure I’ll figure out, but that’s worth to take look.

Thanks for your advice and suggestions!

4 Me gusta