Achieveving the same fading page transition as NodeBB?

Dev
1

Hi.
One thing I like more in NodeBB than Discourse is the page transition effect.
The main difference is that on Discourse, the content HTML is removed as soon as you click a link, whereas, on NodeBB, the content is kept until the new content is ready to be displayed, allowing a nice fade-out effect on the content while the next page is loading.

Would such modification be possible? Would it require some extensive coding?

2 Likes
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 Likes
3

I’ll try this, thank you!

1 Like
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 Like
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 Likes
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 Likes