You may have noticed that any Softr page loads their blocks in an ugly way, sometimes (blocks are loaded one by one then re-arranged… not very cool UX).
So, you also may have noticed that when you enter the Softr public community (made in Discourse) there is a loading background displayed, waiting for all the content to be fully loaded before displaying the page content.
Let’s do the same for your app!
I) Code to be inserted in the header of your page or app (for all the pages) settings
Precision: in the first code it is possible to set a blur effect. In order to do this, replace 1 by 0.9 or 0.8 in this line of code in the <style> , opacity: 1;
The spinner is customizable (size and color) here: #loading-spinner i { font-size: 60px; color: #000000; }
The white background can be of an other color if you change this line of code: background-color: white;
If you want to add a text next to the spinner, like “website-name is loading…” here is the updated code (no need to update the Javascript part in the footer).
On tablet and mobile devices it will be displayed as a column layout (spinner above the text).
Hi Tim,
I can’t reproduce it, works fine on my end.
The page where it doesn’t work is climateu.earth if I’m right?
If 504 error, it is possible that the problem comes from your website, for example a temporary outage from Softr.
Also, I noticed you inserted a JS code in the header in your website, if I’m not wrong, ruling text sizes when the screen is < 768px. A conflict with this one may be the reason.
(and JS codes are always better in the footer)
You are my softr HERO Matthieu, this was one of those nagging issues on my radar (that probably I’d never get around to figuring out because all the other more high priority real issues I’ve been trying to resolve)… what a lovely surprise, you already figured it out for me
Hey Matthieu,
Looks like it had nothing to do with your code, I added it now and it works perfectly.
There shouldn’t be any code in my website header though besides your code?
Final thought/question:
Is there any way to rotate the text that is being portrayed?
I’m portraying “Cooling the planet…” now on every page as it is being loaded (which is AWESOME!!!) - it would be so cool if I could rotate that text and show different strings to keep the loading experience fun → “Capturing Carbon”, “Reaching net-zero”, “Planting trees”…
Any idea how feasible this is?
PS: I’m so thankful for your building this!! Instantly upgraded user experience. Drinks on me!
In your header, there could be other codes, no problem.
Here is a rule that works in 99% of the use cases.
<style> => in the header (and anything related to style needs to stay in one and only one <style> </style> tag => no need to create multiple ones.)
<script> => in the footer. Otherwise the script will be loaded too soon - can create conflict on page loading.
For routing, this should be possible yes, I will try to do it this week.
The other solution, if your website is not too wide, is to insert the two codes page by page and change the text label each time, by hand.
Thanks so much, I’ll make sure to not mess that up
And if you have the time, I would obviously love that instead of always adding individual code to every new page and changing it up haha; but it’s definitely a (painful) work around for now
As there was a real delay to display the dynamic text, I’m going to show you the exact opposite of what I told @Tim_ClimatEU above = put a JS code in the header , but that is for the best!
So here is the code, to be inserted in the header of your app
You are a hero@matthieu_chateau . I was thinking to add such a thing (without knowing how) the last few days. Our airtable base is maxed out and seems to be needing up to 30seconds to even show anything which would probably make any visitor feel as if the website was down apart from me, who knows that something will be there after 30 seconds. Being able to display “WAIT! We’re loading!” is super important for me.
So THANKS A LOT!!!
You also can benefit from the last version of fontawesome (6.4.0)
An example you can try (this is to be replaced in the first part of the code, as you can easily see. Careful the <link rel is different)
I already gave a code to dynamically change the text in the loader screen according to the page title, but maybe you would like something else? Feel free to ask, I will tell you if it’s too much work to do or if it’s feasible in no time.
Yes, I saw that, so cool!! My page title are just not very exciting
In my case, I would love to have placeholders for different strings that alternate, not the page’s title.
Is that complex?
You decide of a text according to the url slug. For example when the url slug is “/this” then the displayed text will be “Welcome to this this funny page, we are loading happiness”. You can add as many else if as you wish
<script>
window.addEventListener('load', function() {
var spinner = document.getElementById('loading-spinner');
spinner.style.display = 'none';
});
var loadingText = '';
var url = window.location.href.toLowerCase();
if (url.includes('/this')) {
loadingText = 'Welcome to this this funny page, we are loading happiness';
} else if (url.includes('/resources')) {
loadingText = 'Loading our resources, knowledge needs patience.';
} else {
loadingText = 'Loading, please wait...';
}
document.querySelector('.loading-text').textContent = loadingText;
</script>
It works on my end! - I put it in the header below the rest of the code (below styles). Does this suit you?
I think @Tim_ClimatEU possibly looks for full randomness, regardless of the page title.
Something like this might work:
<script>
window.addEventListener('load', function() {
var spinner = document.getElementById('loading-spinner');
spinner.style.display = 'none';
});
var loadingTexts = [
'Loading, please wait...',
'Welcome to this funny page, we are loading happiness',
'Loading our resources, knowledge needs patience.',
'Hold tight, we are preparing something special for you',
'Get ready for awesomeness, we are loading...',
'Patience is a virtue, we are loading the page...',
];
var randomIndex = Math.floor(Math.random() * loadingTexts.length);
var loadingText = loadingTexts[randomIndex];
document.querySelector('.loading-text').textContent = loadingText;
</script>
, but that is for the best!
