Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
There is currently one layout file from which the rest of the files are extending
@extends('layouts.main')
@section('content')
// .. page content ..
On many pages, there's a split second while it loads where resources display at the "natural" form, so stuff like select plugins just show raw html, images that are used as icons are showing full size before resizing and the content just "wiggles" before it stays still
I suspect it's something to do with the JavaScript and how it's setup in the main layout file.
The JS scripts all have defer keyword in them and this is the order in the layout file:
<html>
<head>
<meta ...>
<meta ...>
<meta ...>
<title> some title </title>
<script src=" ... " defer></script>
<script src=" ... " defer></script>
<script src=" ... " defer></script>
<script src=" ... " defer></script>
<link href=" ... " rel="stylesheet">
<link href=" ... " rel="stylesheet">
<link href=" ... " rel="stylesheet">
<link href=" ... " rel="stylesheet">
</head>
<body>
<main>
@yield('content')
</main>
@stack('scripts')
</body>
</html>
Could it be related to the order of the JS file loading and their usage of defer?
This problem is probably because your code loads some scripts / styles after the DOM is entirely loaded.
I already had a similar problem and I solved it by removing the defer attributes to the imported scripts for which this attribute wasn't absolutely needed.
Are you using a CSS framework ?
@vincent15000 Yes, bootstrap and select plugin (which have css modules) and popper (because bootstrap 4)
I just removed all the defers, but still it shows in raw form. Could it now be related to the order in which they are placed?
@vincent15000 thanks!
I just removed all the deferred keywords from the scripts, but it keeps happening. Then if nothing stops the scripts from loading before HTML, why does it still happen?
Please or to participate in this conversation.