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

Custom Coding
22

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

1 Like
23

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:

24

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

25

Hi,

What do you mean exactly by multi checkpoint loading?

26

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:

27

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
28

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

29

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.

30

A superb optimization thank you @matthieu_chateau :slight_smile: