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>

score 0 · Answer 2 · answered Jan 20 '23 at 18:34

I was experiencing the same problem in Laravel using Blade.

Given that I intend to enforce CSP rules, the usual solutions consisting in hiding HTML element with styling or its dual consisting of displaying a blank element to be remove later were not a viable option because both imply to inline style and/or javascript and inline styles and inline scripts are precisely what one want to avoid when using CSP rules.

What worked for my case was to use preload link types. This eliminates the flashing and the warning in the console. The preload link type basically make the browser schedule the resource to be downloaded and cached with a higher priority.

The example given by MDN:

<head>
  <meta charset="utf-8" />
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style" />
  <link rel="preload" href="main.js" as="script" />
  <!-- many resources can be preloaded see the link below code for more -->

  <link rel="stylesheet" href="style.css" />
  <!-- preload only load the resource that still needs to be referenced -->
</head>

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>

  <script src="main.js" defer></script>
</body>

MDN: What types of content can be preloaded?

html css fouc content-security-policy laravel

Is it possible to add the preload attribute to `@vite('resources/css/main.css')` asswell? — KreutzerCode, Apr 15 '23 at 21:14
Don't know for sure but given that you can remove some "preload" (https://stackoverflow.com/questions/70980498/disable-preload-in-vite) might probably be possible. Tell us if you succeeded. — nvidot, Apr 18 '23 at 15:56

Remove flash of unstyled content in a Laravel application

2 Answers2