Remove flash of unstyled content in a Laravel application

Question

I am developing a simple website for cars dealership. I am new to Laravel and this is the first time I deal with such thing, actually this is the first time I see something like this in an application that I developed.

So I understand the problem, the browser renders HTML before it applies CSS style, sounds logical to me. However, I don't see any of these anywhere else but my Laravel application?

I read some questions and articles about this and none of the solutions worked for me.

Questions: How do other websites overcome this problem, I don't see it in StackOverflow for insance?

Why it happening, I optimized my pageload to maximum and it still flashes on localhost! the website is not yet on any server.

Here is a screenshot of the website loading time (keep in mind that this is from localhost)

I've tried the following:

On the top of the page:

       <script>
            // Alternative to load event
            document.onreadystatechange = function () {
                if (document.readyState === 'complete') {
                    document.body.style.visibility = 'visible';
                }
            }
        </script>
<body class="g-sidenav-show bg-gray-100 g-sidenav-pinned" style="visibility: hidden !important;"> the rest of the code ...  </body>

Also tried:

 window.onload = (event) => {
        document.body.style.display = "block !important";
        console.log("Loaded!!!!")
    };

Nothing actually worked!

How are you loading your css? If it's loaded via a `` it should block the rendering until the css file is fully loaded and parsed by the browser. If it's loaded via some other method, or added to the `` via javascript. you'll notice a flash of unstyled content. you can circumvent this by hiding the body until the css file is loaded (like the articles you mentioned.). — Lars, Sep 07 '21 at 21:25
This solution may possibly help, https://stackoverflow.com/a/22767958/10213537 — Ameer, Sep 07 '21 at 23:05
@Adelin, i'm not familiar with Lavarel, In the end it's the browser display the FOUC. I would start by inspecting what initial html is served to the browser. (that would be the first entry in the network inspector tab of the devtools). If you notice that the ` — Lars, Sep 08 '21 at 21:13
Standard optimising approaches should help, eg looks like you have ~6 stylesheets (and one of them almost .5MB!!?), have you tried combining them? — Don't Panic, Sep 19 '21 at 16:22

score 0 · Answer 1 · answered Sep 19 '21 at 13:19

This kind of configuration should prevent any FOUC. You can use vanilla JS if you're not loading jQuery.

  $(window).on('load', function() {
     $('.preloader').fadeOut('slow');
  });

.preloader {
    display:block;width:100vw;background-color:white;height:200vh;position:absolute;top:0;left:0;z-index:1000000;
}

<div class="preloader"></div>

Remove flash of unstyled content in a Laravel application

1 Answers1