4 ms·

Is there a standalone way of preventing the white flash of a full page load when you navigate to another URL in an SSR app? Or are they all tied to pretty big b

Is there a standalone way of preventing the white flash of a full page load when you navigate to another URL in an SSR app? Or are they all tied to pretty big backend frameworks like RoR?

kall 5y ago
What browser does that? Don't they usually stay on the same page while it loads and then switch right to the nw one?
marginalia_nu 5y ago
White flashes are usually a loading issue, like too much crap in the <head>-tag, or some critical resources aren't loading as early as they should.
robgibbons 5y ago
You could use something like Hotwired Turbo. Personally I'm not a huge fan, but it easily turns "traditional" web apps into SPA-like experiences. Under the hood, it does full page requests, but then calculates a diff and only renders parts of the page that have changed.
jon_n 5y ago
https://web.dev/app-shell-ux-with-service-workers/ https://web.dev/app-shell-ux-with-service-workers/
tqkxzugoaupvwqr 5y ago
Navigated on a dark website in Safari, Firefox and Chrome and couldn’t reproduce the issue. When I click on a link, the browser loads the page and when it’s ready the displayed page switches to the newly loaded one without a white flash. Should you encounter white flashes, try preloading likely next clicks (e.g. next page, or first search result, or where the mouse cursor hovers 200 ms over a link) with `<link rel="prefetch" href="theurl">`[1]. Make sure your HTTP response headers contain caching instructions, otherwise prefetched pages are requested immediately again by some browsers. [1] https://developer.mozilla.org/en-US/docs/Glossary/Prefetch https://developer.mozilla.org/en-US/docs/Glossary/Prefetch
- tqkxzugoaupvwqr 5y ago
  Another thought, haven’t verified: If CSS loading is deferred, content might be displayed unstyled on default white background for a brief moment. You could set the page background color as part of the HTML page in a `<style>` block.
jlokier 5y ago
Sibling comments are saying browsers hold the old page until the new one is ready, but it's not true for me. I've just watched a momentary blank page flash up consistently when navigating forward right here on HN, for example from the front page to a comments link. It's HN, so I think we can rule out JavaScript page generation. Fwiw, I'm using Firefox 100.0 on a Mac, and my network is high latency. Related issue that used to be known by more web devs: FOUC (Flash of unstyled content, https://en.wikipedia.org/wiki/Flash_of_unstyled_content https://en.wikipedia.org/wiki/Flash_of_unstyled_content). There have been various techniques over the years to deal with FOUC, and it's not that straightfoward, for example waiting for custom fonts if those take a long time to load.

Is there a standalone way of preventing the white flash of a full page load when you navigate to another URL in an SSR app? Or are they all tied to pretty big backend frameworks like RoR?

kall 5y ago

What browser does that? Don't they usually stay on the same page while it loads and then switch right to the nw one?

marginalia_nu 5y ago

White flashes are usually a loading issue, like too much crap in the <head>-tag, or some critical resources aren't loading as early as they should.

robgibbons 5y ago

You could use something like Hotwired Turbo. Personally I'm not a huge fan, but it easily turns "traditional" web apps into SPA-like experiences. Under the hood, it does full page requests, but then calculates a diff and only renders parts of the page that have changed.

jon_n 5y ago

https://web.dev/app-shell-ux-with-service-workers/ https://web.dev/app-shell-ux-with-service-workers/

tqkxzugoaupvwqr 5y ago

Navigated on a dark website in Safari, Firefox and Chrome and couldn’t reproduce the issue. When I click on a link, the browser loads the page and when it’s ready the displayed page switches to the newly loaded one without a white flash. Should you encounter white flashes, try preloading likely next clicks (e.g. next page, or first search result, or where the mouse cursor hovers 200 ms over a link) with `<link rel="prefetch" href="theurl">`[1]. Make sure your HTTP response headers contain caching instructions, otherwise prefetched pages are requested immediately again by some browsers. [1] https://developer.mozilla.org/en-US/docs/Glossary/Prefetch https://developer.mozilla.org/en-US/docs/Glossary/Prefetch

tqkxzugoaupvwqr 5y ago
Another thought, haven’t verified: If CSS loading is deferred, content might be displayed unstyled on default white background for a brief moment. You could set the page background color as part of the HTML page in a `<style>` block.

jlokier 5y ago

Sibling comments are saying browsers hold the old page until the new one is ready, but it's not true for me. I've just watched a momentary blank page flash up consistently when navigating forward right here on HN, for example from the front page to a comments link. It's HN, so I think we can rule out JavaScript page generation. Fwiw, I'm using Firefox 100.0 on a Mac, and my network is high latency. Related issue that used to be known by more web devs: FOUC (Flash of unstyled content, https://en.wikipedia.org/wiki/Flash_of_unstyled_content https://en.wikipedia.org/wiki/Flash_of_unstyled_content). There have been various techniques over the years to deal with FOUC, and it's not that straightfoward, for example waiting for custom fonts if those take a long time to load.