Adding something visual using Page HTML Header

[joeyg]

I have a single page app that is taking too long to load. The user experiences ~5 seconds of a blank screen while Bubble is downloading all the code for the page. I’d like to show some action on the screen instead of just 5 seconds of dead time. The problem is that icons, images, plugins, etc don’t display BEFORE the app starts to download.

My question: Is it possible to add code in the Page HTML Header section that will display something visual to the user (as simple as “Please wait, this shouldn’t take long” to something even more pleasing like a spinner of some sort)? If so, can you show me how? I’ve tried a bunch of stuff and just can’t get it to work. I think it should be possible, but it’s likely a syntax problem.

Thanks for any help!

[WorkWithJordana]

Hi @joeyg !

One approach might be to do it through workflows.

For example: You could create a spinner image with an opaque background that appears in front of everything ‘on page load’ and remains for 5 seconds, then set your regular page elements to load a split second after behind the spinner image. By the time the regular page elements have loaded, the image on top will disappear.

Let me know if you need a helping hand with this.

[tarafield2015]

Yes, in the workflow choose “on page load” and launch a popup, adding a “pause” in between closing the popup. Inside the popup, simply add an icon that spins, with some text underneath such as “loading”

[joeyg]

Thx for the suggestions, but the problem is those workflows don’t run until Bubble gets all the element code. I have a single page app and there’s this ~5 second pause on a blank screen while all of this is going on. I was thinking (hoping) the page header html would download and run first while all the elements were downloading. I did get it to work, but it’s the same behavior - the “loading” message displays after the 5 second blank screen. I also tried adding some HTML to the app header (in settings), but also the same behavior.