Experiment on Meta: 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 ?

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

7 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:

5 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:

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

2 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