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

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

Thanks guys, indeed great work. However, my site’s core web vitals are still failing, can any one help me pass them for

https://howtodiscuss.com for mobile+desktop.

I made a similar topic here and happy to pay for this if someone can help.

Why would you want to get full scores?

1 Like

Are you using this tool? I think it uses real-world data from users over the past 28 days, so if you updated recently, it might take a while to show up in the reports.

If you test it here, your results are all in the green: Measure page quality

2 Likes

Discourse works fine and the splash is doing its job. The issue is your theme. I just ran the same test from your other post.

With the theme enabled

Latest Performance Report for: https://howtodiscuss.com/ | GTmetrix

With the theme disabled

Latest Performance Report for: https://howtodiscuss.com/?safe_mode=no_themes | GTmetrix

You have too many ads, and they’re not configured correctly, so they cause the content to move a lot when they load/refresh and make the site unusable.

The ads also cause a lot of CPU/network usage even if your users are just idle on a page. Here’s a recording of 1 minute on your homepage without any user action.

16 Likes

I have also enabled this option in my settings, but I don’t see it?

1 Like

That is only good thing. If you’ll see it, it means something is starting too slowly. But you can throttle your browser if you like to see Splash in action.

3 Likes

Oh, then I guess I will never see it, its running locally and I use web socket.

1 Like

Great analysis @Johani Thanks.

How can i disable all themes permanently on my site for all users? To pass core web vitals as this is a ranking factor by Google now in SEO.

Is there anyone here who can help me configure my ads implementation correctly so that my site speed is still fast and passes core web vitals. Happy to pay for this.

Please reach out to me via PM.

1 Like

The white flash is back with a vengeance on beta14