Horizontal loading slider

You’ve done a great job with the slider and it definitely has a more classy feel to it (which would be perfect for say, the site of a prestigious architects) but unfortunately it does make Discourse feel slow compared to what we’re used to (and compared to other forums) and I think there is a psychological impact of that which could be a hinderance.

Have a look at the comparison of the slider vs the spinner - the spinner feels significantly faster even though the pages are probably loading in approximately the same time:

If we’re really set on the slider here are some things which could be worth trying: instead of dropping to 20% go all the way to 0, and only show the slider if the page takes longer than a second or so to load.

2 Likes

Note that the Elixir forum is hosted in Europe, so it actually is significantly faster for those of us on this side of the Atlantic. Meta is hosted in AWS’s us-west-1 region.

> time (curl -Ss https://meta.discourse.org/latest.json > /dev/null) 
0.03s user 0.01s system 3% cpu 1.280 total

> time (curl -Ss https://elixirforum.com/latest.json > /dev/null)
0.02s user 0.01s system 10% cpu 0.286 total

But yes in general I agree the fade isn’t a perfect solution. We’re going to be trying some more ideas here… watch this space.

9 Likes

It’s a similar experience on forums hosted by Discourse too tbh, but it’s great to hear you are looking into tweaking it :+1:

2 Likes

For now I’ve restored the spinner, but kept the slider as well. We might try some other experiments later this week.

6 Likes

@dodesz hat theme is this? looks very good

I disabled it again for now because both the slider and the spinner at the same time are too much IMHO.

Looking forward to new updates though.

2 Likes

Our site is using this cool slider without the body transition and it works well (except during “very fast infinite scroll”, which is not a big deal so far) with positive feedback from users.

See Page Loading Example:

Agree @Terrapop, the slider + spinner is “too busy” and distracting, for sure.

5 Likes

Yes, I liked it that way. How did you disable the spinner in the latest version again?

1 Like

No. I forked the prior version before the last changes; and just commented out the body animation (and made the slider one pixel thicker on mobile and a few more pixels thicker on desktop). We have been running it live that way for a few days and really like it (and users have also commented that they like it as well). After trying a few minor tweaks, we are happy with it now.

Feel free to try it :slight_smile: … its free and friendly :slight_smile:

1 Like

Just wanted to mention publicly @david, the latest refinement here just hit the sweet spot for me (at least on mobile which I tested now for 20 minutes)

For everyone - we now only show the spinner after a delay, so slow connections will still get it

11 Likes

Not just slow connections. We have that problem with big topics too, and the spinner actually looks well in those situations (the message is “working on it” instead of “this thing just froze up”. :sweat_smile:). So, big kudos. :raised_hands:

5 Likes

It’s an improvement but I’m still finding it feels noticeably slower - was there any reason why the spinner is being rejected/replaced with this? You have all done a great job improving the slider but the spinner still has the edge imo, particularly on a slower loading page:

https://streamable.com/q2gh0q

(Assuming the Rust forum is hosted in the same network/server as Discourse^^ (not sure whether being logged out would make much of a difference?))

3 Likes

It makes a big difference as anon responses can be cached.

3 Likes

I thought it might so just went back and did a comparison logged out on both:

https://streamable.com/1x0tbs

It’s definitely faster, however overall I think the spinner just works and fits Discourse better - it feels faster but also isn’t jarring/prominent or lasts as long as the slider.

S’up to you all tho, personally the spinner gets my vote (sorry!) and I was actually going to post in the PG Update thread saying how much faster/snappier Discourse feels since that update :sunglasses: (it would be a shame to take a step back now, even if it is a little one :sweat_smile:)

4 Likes

I agree. The slider is a retrograde step. I’ve had a look on desktop too. Even without fading, it’s still “messier” on the screen and more distracting than the spinner. So on both mobile and desktop the spinner wins.

But if the old spinner will be an officially-maintained theme component, I’d use it and be happy enough. Will it be? Thanks in anticipation.

3 Likes

We will do a simple theme component to switch back to old behavior once this is integrated.

The plan for now is just to live with this for 1-2 weeks on meta prior to integrating.

Keep in mind, when cheese moves … people are not happy. Unless you live with a change over multiple days it is very hard to judge.

13 Likes

Now that the awkward fade has been removed, I don’t think the blank page with slider versus the spinner makes much of a difference to me. I think it looks decent on mobile now. On desktop though, I think the slider is too thin vertically. Maybe it’s just my lighting or the fact that I’m using a 27" monitor right now, but it’s really hard to see the progress bar go across the screen.

5 Likes

I’ve spent a bit more time on this, comparing both desktop and mobile and I’m sorry to go against the grain but I feel the spinner is better on both by quite a margin.

The slider (on a site like this) just feels slow and abrupt, and although can work well on some types of sites (particularly longer loading sites where a visual indicator of how much the page has/is loading is important) I don’t think it is suited to a forum or any kind of site where a sense of speed is important.

I really hope you don’t proceed with this or if you do, make it a theme component and keep the default a spinner.

5 Likes

I do miss the fade out mostly because I don’t like the blank page state, and because it “softened” the transition… the blank screen is harsh.

9 Likes

I agree with @awesomerobot here @sam – the faded text is much better than the harsh blank screen.

8 Likes