Horizontal loading slider

Just a side note, but I recently remembered that XenForo has always had a loading slider. I’m glad to see that Discourse has something similar now. :slight_smile:

I’m wondering which will be much annoying when has poor network.

¡Great! :heart_eyes:

1 Like

You can simulate poor network conditions using the f12 console in Chrome, if you want to.


Update on iPhone 6s:

Looking very good with Dark theme now and many other themes on mobile.

Well done!

Update on Desktop:

Load slider still barely visible on Chromium with 27" and 34" ROG monitors.

Can we have a theme option to enable/disable based on mobile/desktop?

1 Like

I wana say the same :smiley: Really good option.

1 Like

I can repro this if using facebook login. It seems this cause this url parameter #_=_


I’ve found disabling the discourse-topic-list-previews plugin fixes all the issues with the Loading slider, as soon as I re-enable it the problem returns.

We’re not using any 3rd party logins, so it looks like this may be a separate bug (or somehow connected?)

Edit: In fact with both plugin’s enabled, the page only remains foggy on topics where discourse-topic-list-previews has found an image to replace the default one…and the categories page.


Following up on testing on mobile and desktop with many themes, it seems to be that something like this gives a nice result for this awesome slider:

  height: 4px;
  @media only screen and (min-width: 960px) {
        height: 7px;

Adding a single pixel (from 3px to 4px) to the default looks great on mobile; and on bigger desktop screens over 5px looks nice, but I settled on 7px for now :slight_smile:

Will work on this a bit more as I have time, testing with various themes on “big” desktop and on my iPhones.


1 Like

Can I go back on the first part of this please? Having tried it out on desktop, the fading out is more irritating then the slider. I think it’s because when I click on a link to page B, I expect page A either to disappear straight away (as Discourse used to do) or stay there until B appears (as with web pages).


Hello, you can use this for disable opacity. Create a new component in admin and add this to common section. :slight_smile:

body.loading #main-outlet {
  opacity: 1 !important;

But at that point, what’s the value of this over the spinner? Just to see a loading slider?


This is just disable the fading effect. It was the first version. Only top slider without fade effect.


Sort of …

The first iteration was … no effect at all so you did not get any visual feedback after clicking a link short of slider, this was not ideal.

I am kind of on the fence on having the opaque page vs the blank page on click. I do agree it can be a bit distracting, maybe fade to 0 on click is better… not sure.


Yes I think so maybe… It’s really hard… Maybe changeable effects would be good for everyone. :slightly_smiling_face:

Personally I really like it with this fading effect also. :slight_smile:

The only problem with 0 opacity is at this point this only affect to main-outlet. The header and below-site-header still visible.

1 Like

I guess articulating my personal pain with the fade (at least on desktop) @awesomerobot / @david

I find it very very hard to read the faded text, so now every transition my brain is being forced to read faded text for a split second and it is a bit tiring.

Maybe if it faded to nothing it would be better, I do not know. Part of the problem is also that I am 250ms away, so at a minimum I will spend about 300ms waiting which guarantees some time is going to be spent looking at faded letters.



I commented out the body transition (the fading text) and I think it looks OK (and maybe feels faster) when there is no body transition. Six one, 1/2 dozen of the other…

// body #main-outlet {
//   transition: opacity 0.2s ease;
// }

// body.loading #main-outlet {
//   opacity: 0.2;
//   transition: opacity var(--loading-duration) ease;
// }



Cheers Don, that’ll do :grin:


Yes, on mobile I thought the fading improved the slider, but I didn’t have a good look on desktop before fading was introduced. (On desktop I found the fading irritating.)

Maybe only enable the fading on mobile devices? The loading slider reminds me a lot of Safari. :slight_smile:

1 Like