Phoenix LiveView - Raw vs CSS-Styled Display

Phoenix Forum Questions / Help
, ,
1

I’ve created a standard Phoenix LiveView application:

mix phx.new demo --live --no-ecto

No problems with that. But when I switch from the start screen to the dashboard (by clicking on LiveDashBoard) and go from there back to the start screen, then the raw text (without styling) of the start screen is shown shortly (like a kind of flicker). Only then after a short delay, the css-styling kicks in, and the normal start screen is shown again.
Is this behaviour by design?
Is there a way to prevent the display of the raw text (the ‘flicker’)?

2

Maybe Webpack was still in process of building assets. Or does it happen every time when you reload the page again?

3

It does happen every time I reload the page (i.e. by clicking the refresh button of the browser). But even if webpack might be the culprit, it would be nice to have a way to suppress the display until the styling is
finished.

BTW: As I followed the standard procedure for creating a Phoenix LiveView application and didn’t add code of my own, the behaviour should be reproducible.

4

When you say “raw”, do you mean the default browser styles or some how mis-rendered html where you see tag names or whatever.

Maybe you’re suffering from FOUC? Flash of unstyled content - Wikipedia

5

I mean the style that is shown without any CSS applied.

6

Firefox tends to do this in my case. Not specifically with Phoenix (Liveview), though.

@overcomeoj which browser are you using and do you see this behavior on other websites?