Curseur de chargement horizontal

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.

Now it looks very good! Great work!

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

Just in case anyone else needs it:

div.loading-indicator {
  background-color: red
}

@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?

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

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

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.

Love it so far. Such a neat detail.

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

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.

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?

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

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.

I see, looking at it now

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

Would love to see them all 3px

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

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

@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?

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

I personally feel this is a big improvement over the spinner and we should move it into core as the default. 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…

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.

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

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.