I noticed that I always get this warning when I run my Phoenix project in firefox:
Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. markup.js:250:53
I was not certain if that was because of something I did, so I created a new empty Phoenix project and added a liveview route to it and got the exact same warning.
The thing with this warning is that, because of it, some elements in the page can show before the css is loaded, so there is a possibility of a “flicker” when the page first loads.
This is very noticeable when you have SVGs in your page since they will render super big first and then, when the CSS is applied, will go back to the correct size.
The only way to workaround this issue that I found was to add this to my body element:
<body class="!opacity-100" style="opacity: 0;">
That way, the whole body is “invisible” until the CSS is loaded and applied.
But honestly, I would rather have this fixed instead of having to rely in an ugly workaround… Does anyone else knows what is happening here and what is the proper solution?
Edit:
Here is a quick video showing what happens when you add an svg with this issue:
Here is my LV render function:
def render(assigns) do
~H"""
<svg
class="size-10"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
</svg>
"""
end
