Horizontal loading slider

Theme component
117

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:

118

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

119

¡Great! :heart_eyes:

1 Like
120

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

4 Likes
121

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
122

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

1 Like
123

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

4 Likes
124

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.

2 Likes
125

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.

https://github.com/unixneo/discourse-loading-slider/blob/main/common/common.scss

1 Like
126

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).

3 Likes
127

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;
}
5 Likes
128

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

2 Likes
129

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

2 Likes
130

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.

6 Likes
131

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
132

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.

12 Likes
133

FWIW,

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;
// }

https://github.com/unixneo/discourse-loading-slider

2 Likes
134

Cheers Don, that’ll do :grin:

2 Likes
135

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.)

136

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

1 Like