Page load indicator - for slow loading apps

Tips
1

So I have an app that’s running slow, and its at a stage where I cant wait to get it in the hands of some testers, and need some time to dig in to the reasons.

I did put a group on the page with a spinner that closes on full page render, however there is still a delay on refresh before that loads - so here is a solution to indicate something is happening (until i find the actual problem).

Settings > SEO / Metatags

in the script.meta tags header

<script>
    $(document).ready(function() {
    $(".overlay").hide();
});
</script>
<style>
    
.overlay {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* HTML: <div class="loader"></div> */
    .loader {
    width: 64px;
    height: 64px;
    border: 10px solid #FFF;
    border-bottom-color: #ff5a00;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 
*/    
  </style>

Script in the body

<section class="overlay">
<div class="loader"></div>
</section>

firefox_R4hAnEqEd2

Some fun loaders : https://cssloaders.github.io/

1 Like
2

Does making the loader group visible first then hiding it after the page load not work for you? I’m just curious cause it works as expected even on refreshes for me.

3

no for whatever reason this is still taking a while for the initial data to get to the browser from Bubble, this however is pretty instant. So I do not know the actual cause as yet, could be Bubble issue, could be my issue, not sure yet.

Here is my pre pre loader, and the bubble before page is fully loaded event.
firefox_v6p1tnjFdA

4

Huh. Maybe I just never noticed since I have individual loaders for different parts of a page.

5

I found out by accident I suppose… but there we go, if you need to show anything before bubble does it thing… then maybe that is the way to go.

1 Like
6

Maybe I could put an image of the app loaded with a loader in the middle until it fully loads… that would be interesting :crazy_face:

1 Like
7

Then you can have a loader for the image of the app loading , then a loader for the loader for the image :joy: That’s how it works, right?

1 Like