Can't get rid of white flash on page load

Need help
1

I’ve tried all of the following, but my Bubble app (on a paid plan) is still flashing white before loading my black-background app:

  • Adding css styles - html, body{background: black;} - to Settings > SEO > header
  • Adding css styles - html, body{background: black;} - to individual page header of SPA
  • Pre-loading styles via <link rel=“preload”… >
  • Setting background color of index to black in Bubble editor

It seems like this is a recent issue, so maybe Bubble is experiencing some server-side rendering issues today (?) Regardless, I’d appreciate any additional tips or tricks beyond what’s listed above.

2

Anytime you modify CSS that is set by Bubble initially, you must mark them as !important.

Also, you want to attach the styling to your page header, or app HTML (like you said you have previously done). This way it loads before the page.

Like so:

.foo {
    bar: 100px !important;
}
3

Thanks @GH5T ! I’ll double check my css against Bubble default styles, and make sure to mark any custom mods as !important.

I also made another change that seemed to speed things up → instead of two separate [Page Loaded & Logged in], and [Paged Loaded & Logged out] WFs, I consolidated to one [Page Loaded] WF with downstream custom events for Logged In vs. Logged out. My hypothesis was that this would allow the page to load more directly/efficiently vs. conflating page load with a login check (?).

Anecdata suggests some speed gains. Thanks again!

4

I just have a floating loading screen, give the page some time to load then hide it.

5

Appreciate it, @ihsanzainal84! I have the same floating div, and it works well. For this question, I’m particularly interested in in strategies for minimizing the “white flash” on initial load, so I welcome any thoughts there.

(Because Bubble has a bunch of render-blocking JS, the longer-than-normal white flash is unavoidable afaict. I’m just looking for tips on how to minimize – even if it’s only user-perceived via CSS background, etc.)

6

Following up @ihsanzainal84 and @GH5T : after some additional testing, it seems the [User logged in] and [User logged out] triggers are much snappier than [Page is loaded > Current user is logged in/out]. I’m now loading my app this way, and the user perceived white flash is significantly reduced. Sharing in case it helps!

1 Like
7

very interesting.