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