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