Background Flashing white during navigation

Hi

Maybe someone can help. Whenever I go to a different page the page refreshes and flashes white between different screens… is there a way to cache the background which is the same on all pages.

Any help would be greatly appreciated :slight_smile:

Regards
Sean

I now remember why I designed all white. Not sure if it was related. It’s Bubble or web logic problem? Great design btw.

I see nothing on Bubble settings to prevent that.

Wow, that sounds like an insane sad problem to have with this app :frowning:

Hope I can resolve that… Thanks for the compliment… been spending many days sorting out the design and flow in Adobe XD. Most of the pages is setup and done, just battling with that ugly white flash during page loads…

Maybe you found the answer with Google: white blank page before navigating OR Prevent white flash between page change.

A fix?

It’s sounds you have to play with the CSS code.

Look here too: Possible to do this?

1 Like

Awesome thanks John,

Experimenting with the above the css makes it less harsh, but still there… looking into the last one you added. it is important to feel like an app and less like a web page… is the one thing that will drive me insane with this. But appreciate the assistance. Will experiment more.

Only signed up a little over a week ago and already build a fairly complex app… Which took me 3 months to do with Wordpress and Toolset. Still fairly new to this new tool.

Kind Regards
Sean

1 Like

Welcome to Bubble @sean6 :slight_smile:

Hi John,

Just a quick thank you… managed to get it much better… chrome and Edge is perfect but firefox not so much…

Going a bit wild with the animation will tone it back still just enjoying it too much :slight_smile:

Kind Regards
Sean

1 Like

Is a SPA (single page application) approach an option? Simply showing/hiding groups would circumvent the issue entirely.

I posted requesting a plugin that utilises Pjax for this exact purpose, as I use Simple-Pjax in my own traditional serverside rendered projects.
To clarify, the white flash is due to the server having to request the new page at the new URL and download all of the assets for that page, including all of the CSS and JS. Seems that Bubble relies on JS rendering which slows things down. Simple-Pjax shows a spinner when a link is clicked (after a certain amount of time), requests the new URL via XHR, then takes everything between the body tags and replaces them on the current page so it feels like a single page application. This means that your CSS and JS don’t get reloaded with each request, but introduces issues with JS that relies on the DOM content loaded event, which won’t get refired; instead, Simple-Pjax fires its own event - and I’m not sure how this could affect your app. It also updates the URL using history push state so the back button works correctly. This is the solution I really want to see implemented.

1 Like

Hey Shot,

a SPA would be great but due to the complexity is is getting a little hard to manage. Maybe it is because I am new to this platform but I am using SPA approach to some of the pages to smooth out the user experience . I guess the better I get at this I would most likely go for a full SPA experience.

The experience in Edge (was shocked) and Chrome is pretty decent. Just Firefox is a bit janky. Thank you for your feedback.

I can wait for this solution, but it does make sense. I am just blown away of what I can manage to get done with this compared to what we have done in Wordpress and Toolset.

I’m curious, having never seen Toolset for WP before, what is it lacking? Seems that you can create forms with ajax functionality, memberships, restricted pages etc.

I am not saying it is terrible, not at all. I use it everywhere, and it is compelling. Connect that to something like Oxygen2 or Elementor (Elementor is better at this stage) there are not many limits, until you use something like Bubble. But Toolset/WP and Bubble are very different animals.

But from a web app building experience, I have not used anything like Bubble at least right now.

Interesting, Oxygen certainly wins with pricing it seems. Any other WP recommendations?

You should use one page, which prevents ‘browsing’.

If you haven’t already considered it, using Sudsy Page offers essentially the same functionality, and with pretty URLs. (Be sure to check out the demos and full edit mode access.)

1 Like