Dead white screen on page load

Hi, so here’s the challenge.

In cases where your bubble app has to load a few more than normal elements on page load especially in native apps(1 page apps) and some heavy websites, there can be a dead white screen like the image below that could last a few seconds, but still undesired and even in some cases, more than 15 secs. How can you work around this?

The normal “blank screen wait” should be less than 2 seconds and you are supposed to use a loader icon to indicate the progress.

Having all your pages in one increases the chances of being very long indeed. I had to change this strategy to have separate pages. Also Bubble editor is faster.

1 Like

I actually agree with you but having multiple pages in an app( not a website) will largely increase activity or functionality time. Think about a user navigating to a different page in your app expecting the feel of an app, having to wait for 6 seconds because the page is loading. And again, having multiple pages is likely to cause your apps decline by the appstore or playstore

1 Like

It really depends on the scope and complexity of the app.

If you wish to do it in a single page then it’s all about the illusion of speed. You need to know what elements in your app are gonna take longer to load and avoid having them load on page load.

Also it is important to know how Bubble loads/renders elements and data. For example Bubble will not render any elements that are hidden unless it was already rendered in the first place or a workflow or different visible element requires data from it.

You’ll need to work in some parallel operations to keep your UX smooth too.

Regardless of what approach you take, users will better appreciate load screens and sequences than a page that doesn’t look like it’s doing anything.

2 Likes

Great suggestion!!! But how do I detect “WHILE PAGE IS LOADING” so I can show that animation and later hide it with “PAGE IS LOADED”

conditional:

when page is loaded is no

this element is visible - yes

1 Like

actually, the opposite is better:

when page is loaded is yes

this element is visible - no

Thanks buddy… I did it

Thanks to everyone who came in here to help