Horizontal loading slider

Theme component
23

Cool. Can you provide the id/class for the override as I do not want to change our quaternary color?

Update: Never mind, found it.

4 Likes
24

Now it looks very good! Great work! :+1:

5 Likes
25

Possibly, but this is still just an experiment at this stage.

Just in case anyone else needs it:

div.loading-indicator {
  background-color: red
}
17 Likes
26

@david Kindly could you replicate the animation 100% like on Github, where first a slightly darker bar appears over the full with, then the loading bar starts filling, and then it fades away?

5 Likes
27

Sure we can try a subtle background there. I am also wondering if ‘tertiary’ is a better color choice here for the bar itself.

16 Likes
28

Would it be possible to add a body class when the loading bar is active so we can add effects on other parts accordingly?
I’m thinking about the fadeout effect from NodeBB: https://community.nodebb.org/
I suppose it could be done with something like that if we have a body class:

body.loading {
    #main-outlet {
        transition: opacity 0.25s;
        opacity: 0;
    }
}
8 Likes
35

I really like it because YouTube does the exact same thing. Although this is experimental, I would like to see it make its way to core. The spinning circle looked very static, so maybe that should get an overhaul and I would more or less be a fan of that instead of the slider.

5 Likes
36

Love it so far. Such a neat detail.

5 Likes
37

Thanks for adding the background! Looks much better and more dynamic now. Great stuff @david

5 Likes
38

I read posts (like 28th post) in this topic, and then I clicked on the topic (to get to the beginning of topic) I didn’t have this thing.

8 Likes
39

Minor, but I think the thickness of the line we use in discourse hub works way better

@pmusaraj how many pixels thick is the line in the hub?

11 Likes
41

Using the topic timer to move around brings up the spinner instead of the slider.

8 Likes
42

It’s currently 2px. But IIRC DiscourseHub deliberately chops off the top 1px of the viewport to work around an iOS bug. So in DiscourseHub it shows as 1px.

12 Likes
44

I see, looking at it now

DiscourseHub 3px
Loading component + hub 1px
Loading component + safari 2px

Would love to see them all 3px :slight_smile:

Note we can have the hub take care of fixing the hub

13 Likes
45

Ahh I see what you mean now - the app has its own loading slider. Yeah 3px looks much better :+1:

@pmusaraj is there a way I can tell in CSS whether Discourse is running in the hub? Or maybe the app can inject some extra CSS?

10 Likes
46

Hmm, looks like we only add a class for the app on iPad. In JS, you could check using the isAppWebview() utility (or we can add a body class for all DiscourseHub webviews, that would be useful anyways).

10 Likes
47

I personally feel this is a big improvement over the spinner and we should move it into core as the default. :clap: It “feels” a lot faster than the spinner, surprisingly so! What do you think @sam and @eviltrout? We have some time to live with it and decide…

19 Likes
48

Yes I am liking this a lot both on desktop and mobile. A few small glitches to work out but yes I think this should be included in core.

14 Likes
49

I was wondering why the progress bar showed up! I love it, nice one @david :clap:

14 Likes
51

Love it! On my macbook retina screen it’s a bit too subtle for my taste though - I feel it shows up more like 1px tall than 3? It’s hardly noticeable.

4 Likes