Clean UX on page load: Add a loading screen in your app pages in order to not see the blocks being re-arranged

I tested it, it works, go DM to show me a picture of your code so I can debug it

1 Like

Aah, silly me, it works, I didn’t take a proper look and thought this was the code for the header.
It works perfectly, thanks so so much guys!!! Game changer, truly! :slight_smile:
@matthieu_chateau @J_1 :raised_hands:t3:

I would be interested to see how multi checkpoint loading would work

Hi,

What do you mean exactly by multi checkpoint loading?

Here is where I got so far - I am working on something for user onboarding. I want to have this screen load as a final onboarding step whilst I have other objects run in the background.

[this is for custom code blocks and does not overlay the screen]

<div style="position: relative;">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

  <div id="loading-spinner">
    <p class="loading-text"></p>
    <i class="fas fa-spinner fa-spin"></i>
  </div>

  <style>
    #loading-spinner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: white;
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    #loading-spinner i {
      font-size: 30px;
      color: #000000;
    }

    .loading-text {
      font-family: Arial, sans-serif;
      font-size: 24px;
      font-weight: bold;
      color: #000000;
      margin-right: 30px;
      margin-top: 20px;
    }

    @media (max-width: 768px) {
      #loading-spinner {
        flex-direction: column;
      }

      .loading-text {
        margin-left: 0px;
      }
    }
  </style>

  <script>
  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;

    setTimeout(function() {
      var spinner = document.querySelector('.fa-spinner');
      spinner.classList.remove('fa-spin');
      spinner.classList.remove('fa-spinner');
      spinner.classList.add('far', 'fa-check-circle');
      spinner.style.color = '#28a745';
    }, 5000);
  </script>
</div>

It will perform a spinner and then after 5 seconds it will auto load a checkmark.

Now I want to repeat twice more for a total of 3.

Spinner 1 will turn into a check after 1 total second
Spinner 2 will turn into a check after 2 total seconds
Spinner 3 will wait for a hook response then turn green then after 1 second redirect to a dashboard page.

Hopefully someone gets further than me :stuck_out_tongue:

This can be performed with event listeners + a set timeout after the event listener (if your onboardng is made with forms or action buttons).
In your case one checkpoint = one event listener.

Without a full overview of your onboarding setup => I won’t be able to make anything (And I don’t have time to check unfortunately).

But here is an additional code with the right event listener attached to a form. This example might give you some clue to perform what you want (the spinner is replaced by an alert box in this use case).

1 Like

@matthieu_chateau, I am truly impressed with the brilliant code you’ve provided for the loading spinner. It has significantly enhanced the user experience on my homepage. However, I have a specific requirement that I’d like to discuss.

Currently, the loading spinner is displayed for all visitors, regardless of whether they are logged in. While this works well for authenticated users, I would prefer to disable the spinner for users who arrive via search engines or direct links and are not logged in.

Would you have any suggestions on how to modify the script to achieve this conditional display? I’ve been searching for a custom script that can detect if a user is logged in, but haven’t found a suitable solution yet.

Your expertise and any ideas you may have would be greatly appreciated. Thank you very much for your time and assistance.

Best regards,
Léa :sunflower:

Hi Lea,

Possible by using (window[‘logged_in_user’])

So the code would be (with an important note at the end)

<div id="loading-spinner">
  <i class="fas fa-spinner fa-spin"></i>
</div>

<style>
#loading-spinner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 1;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#loading-spinner i {
  font-size: 60px;
  color: #000000;
}
</style>

<script>
if (window['logged_in_user']) {
  var spinner = document.getElementById('loading-spinner');
  spinner.style.display = 'flex';

  window.addEventListener('load', function() {
    spinner.style.display = 'none';
  });
}
</script>

Note that now there is a display: none; in the style AND the script has changed.

A superb optimization thank you @matthieu_chateau :slight_smile:

Hey @J_1 and @matthieu_chateau :wave:
I just wanted to re-implement the alternating loading spinner, but I realized that there is an issue with the timing of the script execution. The JavaScript in the footer is running after the HTML and CSS have been loaded, causing the spinner to display initially without the text and then updating after the script executes.

That means the spinner always first loads a spinner from the code in the header, and then re-loads the spinner from the code in the footer, which doesn’t look very smooth.

I used the header code for the spinner with a customized text to display and left the field for the text blank.

So it’s this in the header:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<div id="loading-spinner">
  <i class="fas fa-spinner fa-spin"></i>
  <p class="loading-text">Capturing carbon...</p>
</div>


<style>
#loading-spinner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#loading-spinner i {
  font-size: 60px;
  color: #275E87;
}

.loading-text {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: #275E87;
  margin-left: 20px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  #loading-spinner {
    flex-direction: column;
  }
  
  .loading-text {
    margin-left: 0px;
  }
}
</style>

And this in the footer:

<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>

Any idea how to make that work with the timing? I tried to ChatGPT my way through it but haven’t managed to adjust the code in a way that works. :smile:

Thanks so much in advance if you guys find a minute to look over it. :slight_smile:

Hi Tim,

One solution would be to move the script inside the header.

Or to let it in the footer and use:

<script>
  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;

  window.addEventListener('load', function() {
    var spinner = document.getElementById('loading-spinner');
    spinner.style.display = 'none';
  });
</script>

Here, the loading text is set immediately when the script is encountered in the HTML, before the window load event.
Whereas in the first script, the loading text is set within the load event listener, so it will be set after the entire page has finished loading.

Aah this is great! Thank you so much @matthieu_chateau !
I added it all to the header for now and it seems to wotrk like a charm. Testing it now on different pages to see if there are any issues.