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

Update: generate a loading screen with a dynamic text.

Here the dynamic text will be the title of your page. Demo page is updated: https://test-play.softr.app/

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 :upside_down_face:, but that is for the best!

So here is the code, to be inserted in the header of your app:

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

<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: #000000;
}

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

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

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

  document.querySelector('.loading-text').textContent = document.title + ' is loading...';
</script>

In the footer custom code:

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