Found a workable CSS hack to show spinner/loader on slow initial load

I’ve read a few posts about people wanting a spinner or loading image for the initial discourse load as it may be quite slower than subsequent loads. I realize this is a CSS hack and not a fancy or beautiful fix, but it is working well enough for my discourse needs.

Update with theme component

https://github.com/daveaevion/discourse-spinner-theme-component


If you want to use the discourse spinner on the initial load in addition to between page loads, follow the following steps.

Step 1:

Add the following code to your CSS:

#main {background: white;}

The main container is naturally a higher z-index than the header so this step ensures that once it loads, it will cover up the spinner.

Step 2:

Place this code in your header:

<div class="spinner" style="margin: 70px calc(50vw - 19px); position: absolute;"></div>

This loads the built-in discourse CSS spinner, but feel free to use another if you’d prefer.

This code will center the spinner on your screen and place it high up enough to not create a duplicate spinner when doing page loads later on. The calc is half of the 30px spinner width (15px), plus the 4px border.

Working example

If someone could create a javascript script that would delete the spinner div after the initial page load, it would simply disappear after serving its initial purpose, and there would be no need for step 1.


It’s definitely quick, but at least on the desktop, there should be a briefly visible spinner on the initial discourse page load vs. nothing but white on vanilla.

The header section is being loaded faster than the main container which explains why it shows up. I guess the slower the server, the more use this has.

Video comparison between this CSS hack and Vanilla Discourse

https://drive.google.com/file/d/1xkBZEfVQP_5-4_pIattqoTWe6uUiZl30/view

7 Likes

I am having trouble confirming that this does anything? I can’t see any difference over vanilla Discourse?

It’s definitely quick, but at least on the desktop, there should be a briefly visible spinner on the initial discourse page load vs. nothing but white on vanilla.

The header section is being loaded faster than the main container which explains why it shows up. I guess the slower the server, the more use this has.

Here is a link to a loading video comparing meta.discourse.org to forum.nursejanx.com

https://drive.google.com/file/d/1xkBZEfVQP_5-4_pIattqoTWe6uUiZl30/view

1 Like

Could you please turn this into a themes component?

7 Likes

A post was split to a new topic: Spinner on initial load

Continued here: