0
177
ViewsCSS and JS files loading twice for preloaded assets in safari
I have an html page which is being served by my node server, the HTML string is generated on the server side and the js and css files are preloaded, attached code below. I see that in safari these assets are being loaded twice which causes a flash of unstyled content on my application page, what actually happens is due to this duplicate loading, the JS hydration and actions starts before CSS loads completely. Any help would help
NOTE: This happens only in safari
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="preload" as="script" href="/build/vendor.93cdba92ba41a9a0915e.js" />
<link rel="preload" as="script" href="/build/main.dfb07bf2ef463aa43736.js" />
<link rel="preload" href="/build/main.18.8f76beb6dd5628871221.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
</head>
<body>
<div style="z-index: 3" class="header" id="desktop-headerMount"> Header here</div>
<div id="mountRoot" class="" style="min-height:1000px;margin-top:-2px;">
// React App Will Mount Here
</div>
<div id="web-footerMount"> Footer Here </div>
<script src="/build/vendor.93cdba92ba41a9a0915e.js"></script>
<script src="/build/main.dfb07bf2ef463aa43736.js"></script>
</body>
</html>
Attaching a screen shot of the network tab too below, the css and js files are loaded twice.
This happens only in safari though, in Chrome it works fine
Edit
I realise this at times depends on network speed, im wondering if some sort of race condition is happening, where before preload completes if my html parser reaches the script tag then this may happen i guess?