Introducing Discourse Splash - A visual preloader displayed while site assets load

We use Google own Web-Vitals library for the internal metrics, so they will match. It’s just that info on the Search console has a wider feedback loop, so we captured those ourselves in order to iterate faster on the solution.

You can also verify the new LCP values using WebPageTest tool.

10 Likes

This looks great!

I know this may sound like a nerdy detail, but is it possible to change the colors of the circles on the loading thing? :grin:

3 Likes

For those who want to modify the loader, here’s the file:

8 Likes

The splash lives in a different CSS scope, so sadly, you won’t be able to modify the CSS via themes. That said, we do have planned improvements, and I started with this one.

Once the change is live on your site, the splash dots will use the colors from your current theme.

18 Likes

I think instead of that animation, the default Discourse spinner should be shown for consistency. Just an opinion though.

1 Like

Nice feature, have it now in latest upgrade.

I would have thought a priority before we worry about decor - would be for it to sync with dark theme, a sudden blast of full screen WHITE using the Dark theme, well is an insane attack on ones optical sensors when also in a dark room! :face_with_spiral_eyes:

Please at some :sunglasses: to keep consistency with dark theme.

2 Likes

My understanding is that we already sync the dark background @Johani ?

Trouble is that it can take a couple of seconds for the server to tell us we are dealing with a dark theme, we could improve second load with service worker wizardry, but it is a very very tricky problem

3 Likes

I noticed something since my last post, so to qualify - when logged out, I noticed discourse picks up the OS theme as dark, sets the discourse site as dark in tandem and thus the loading screen uses dark background color also to sync with theme-styling

However , when logged in as a user that is enabled dark theme as default, it reverts to white loading screen.

So I might be right in saying it s already 50% working as expected. :disguised_face:

I haven’t tested it out maybe someone else might give it a try.

1 Like

Yep, tested this today, this is how it’s behaving, works when logged out and then defaults to white screen when logged in as a user with DARK theme set, if you can make it behave same a when theme is detected for OS Dark theme, then that should be it.

3 Likes

Strangely enough, it seems to be based on whether my OS is set to light or dark mode, and Discourse does the opposite of what I’d expect. Basically, when set to dark mode Discourse flashes white, but when set to light mode, Discourse shows a dark page until content loads.

Here is dark mode. Note that it starts dark (iOS waiting to get data from the server), then flashes white (initial page load for Discourse I think), then loads the dark theme I have set:

And here is light mode. It starts white (iOS waiting to get data from the server), then turns dark (initial page load for Discourse I think), then stays in the dark theme I have set:

4 Likes

Interesting! Thanks for the Videos, @Johani will have a look and report back.

6 Likes

Yep that’s it, perfect example with video too!

I knew I wasn’t going mad! :crazy_face:

2 Likes

@Johani I updated the latest commit with what I assumed was the fix, or hopeful fix, but I am not sure it has made any difference (iOS, Safari / macOS Safari)

My connectivity is too good at the moment to replicate it easily, let me go find some dial up or something… :rofl:

2 Likes

On desktop, you can throttle your connexion using your browser’s dev tools: How to perform Network Throttling in Chrome | BrowserStack

I don’t know about mobile browsers though.

2 Likes

Thanks, I don’t use chrome but I’ll have a look at the xCode tools and configure some throttling.

I’ve had a bit more time and can confirm it remains the same.

2 Likes

This is possibly related to the white flashes, so I’m going to post it here.

iPhone in light mode, the top bar is dark. This is expected since it matches the dark Discourse layout I use.

iPhone in dark mode, the top bar is light. This is unexpected and like the white flash, seems to indicate that something about the layout is convincing the phone the page is white. The reason I say that is because Safari on iPhone tries to color the top bar to match the main color of the site you are viewing.

3 Likes

We did, but we missed the case where the user only sets the regular color scheme as dark. We previously relied on the OS preference to pick between the light/dark mode for the splash with the assumption that users set both and use the OS toggle.

I pushed a couple of fixes

If the regular scheme is dark, use that. If it’s light, use the light scheme for OS light mode and the dark scheme for OS dark mode (if it’s set)

The issue, as well as this one

should be fixed now. Thanks for the reports :+1:

10 Likes

:+1: Cool look forward to trying this out!

Suggestion - Branding

Is it possible to allow a basic logo customisation above the animated dots or to populated the “dots” with the logo (fav.ico size image) or a fixed low res fixed size (if load and speed is an issue).

Another user suggested returning the loading circle, which is a familiar artefact of discourse, which I think is a neat idea, for UI/UX consistency and would be enhanced by allowing specification of a base static site image/logo - it keeps the user oriented and located while in the limbo load state, increasing user experience and user confidence.


To add - grabbing the image form the existing branding setup, fav.ico or “logo small” is probably a good default.

2 Likes

Super this now appears to be working as expected!

Thanks for such diligence. :1st_place_medal:

3 Likes

Thanks for that update. It made a huge difference in Core Web Vitals, and everything is in the green now.

6 Likes