Experiment on Meta: horizontal loading slider

@david maybe we disable all clicks while the new page is loading and we are showing old content? Seems like an edge case, but a reasonable one

@awesomerobot are you happy with the thickness of the slider on desktop, jury is out in my department, going to live with this for a few days. On mobile I feel we have the right balance

7 Likes

Depends on what you’re going for I think. If one of your main goals is “works (almost) identically to the rest of the internet” you may not want to do this. On “regular” websites, if I very quickly click a second link after clicking the first, the content of the second link will be loaded.

8 Likes

I like this change a lot, especially with the later tweaks … I like it so much I am anxious for it to go out in a beta to get even more feedback.

When can we get this into core @david ?

9 Likes

Yeah I guess you are right… I guess I support just getting it into core exactly as it is today.

We can can always refine this as we go but what we have now is pretty refined and works really nicely.

8 Likes

It seems OK to me at the current thickness, I think if we get complaints of it not being noticeable enough maybe then we can bump it up by another 1px. Excited to see it in core!

7 Likes

Sounds great! There are still a few rendering bugs to iron out (e.g. this one), but once I have those fixed up we could add it to core. I think I’d still prefer to test it a little longer on Meta though. The current implementation has only been live for 24 hours.

Taking a look at a few other popular PWAs:

Service Immediate whole-page change Slider Spinner Custom placeholder
Facebook :white_check_mark: :white_check_mark:
Twitter :white_check_mark: :white_check_mark:
LinkedIn (on some pages) :white_check_mark:
YouTube :x: :white_check_mark:
GitHub :x: :white_check_mark:
:discourse: Old Discourse :white_check_mark: :white_check_mark:
:discourse: Discourse with Slider :x: :white_check_mark:

So this change would make us more like YouTube and GitHub which, IMO, feel more like websites than apps. Is that a direction we want to go? :thinking:

15 Likes

I think so, it meshes with a philosophy of minimal / web like default theme. We can always provide a theme component for spinner or custom place holder if we feel like experimenting

I really like that this change reduces the amount of pixels that change on the screen

I think gmail also does a similar pattern (it renders loading in a square, then flips content)

8 Likes

We have our slider set as follows (below). It’s a matter of taste, but I think 4px on mobile is nicer than 3px; but 3px is fine and certainly OK. However, on big desktop screens, it looks better, subjectively speaking, at 6px; however, I like personally 7px because I want people to see the slider and the relative progress, when the page loads against all theme background colors; but if we reduced it to 6px on a big desktop screen, it is also very OK. Less than 6px on big desktop screens make it barely noticeable on 27 and 34" monitors (against some bg theme colors); and since the slider indicates “loading”, my view think it is better to error on the side of more noticeable; but again, it’s very subjective of course.

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

My (late) feedback on this feature:

Before I visited this topic, I didn’t even notice the change which is… good! In my opinion good features are the ones that blend in with the current experience.

After paying some attention to the feature, I can agree that the less screen flashing is more visually appealing than the previous behaviour.

Congrats to the team for the careful design and thought they put on this change! :slight_smile:

13 Likes

Hello,

I love this component, but I found a bug ( I thought there’s a conflict in my theme but I can see it here as well). When we click on the .navigation-toogle element, the dropdown remains open:

6 Likes

Maybe my report got lost in the shuffle (or maybe they just haven’t had time to look yet).

3 Likes

Thanks @cosdesign and @seanblue - it’s still on my radar to fix. I’ve started a list of ‘known issues’ in the OP here so we can keep track of what’s outstanding.

10 Likes

That dropdown issue should now be resolved:

https://github.com/discourse/discourse/commit/863c7919d7f9292bfced713d91aaa827b0c1747c

8 Likes

I really love this component, I just had to install it on my discourse forum as well. Thanks!

One suggestion: would it be possible to show a skeleton while the page is loading? In cases where the page might take a moment to load it can help indicate that the click has registered. It’s just a small detail I have noticed that sometimes I click twice on a topic title because I did at first not see the loading bar, where as the spinner was shown directly.

4 Likes

It is a compromise we made here, we opt never to change stuff on the screen unless 2 seconds have passed and we have no content to show.

I guess we could provide some sort switch to lower that 2 seconds down to 1, but I feel we found the right balance here.

7 Likes

I’ve just come back after several days away and the first thing I noticed was how slow it feels here now.

I realise Google groups has introduced something similar but I don’t think we need to imitate what they’re doing. The spinner was a much better fit for Discourse imo, it was snappy and even helped dispel the myth that Ruby apps are always slow. I loved it and loved how fast Discourse appeared. Unfortunately I feel this slider is a big step back (apologies to everyone who worked on it I know this is probably not what you want to hear - but I think we all want what’s best for Discourse so hope you won’t mind me sharing how I feel about this).

2 Likes

When we release this in core we will provide a component that allows for the old transition mode.

We hear your feedback, but you are in an extreme minority, majority of the users prefer the new transition style. The new style means less things change on the screen

Old

Click → white screen → content

New

Click → content

I get that some people may love a white screen with a loader, but this is a minority view

11 Likes

It’s not about loving a white screen or not Sam, it’s about the sense of speed.

I’ve actually always thought that the speed (and feel) of Discourse was one of its most impressive features and I know that even those who were quite against Ruby were impressed with what you had done with Discourse.

I also think that sense of speed is more important now than ever, because we are continually competing with huge sites like Twitter and Discord, and I think even a slight feel of sluggishness may have an impact - even if it is subconscious.


It’s great that there will be a component for the old transition mode, but my worry is it might add an overhead which leads to a slowdown (even it it is small) thus negating the benefits of the old way/spinner - if this won’t be the case then I’ll be happy with that… but I still think this move is going to be bad for all the other Discourse sites out there.

4 Likes

I completely agree about the perception of speed.

If the spinner were to stay on screen for ages then that would indicate a problem (though the spinner would not be the problem) and perhaps be less informative than a slider.

Sliders indicate underlying slowness. They remind me of those old Windows progress bars (estimated time remaining: 6 days 23 hours). When I notice them I think there must be a problem with speed and they’re there to reduce my impatience. This one always seems to pause slightly at about 80% which makes me think something has gone wrong, every time.

If the forum is fast then the slider is not a good idea.

4 Likes

The more I use Meta, the more I think I prefer the old spinner. The slider just isn’t noticeable enough, so it makes the website feel unresponsive.

2 Likes