A better compromise here is to hide it by default only when JavaScript is present: e.g. add style="display:none" to the root element in an inline script before any external scripts, and then remove that when you’re done, or onerror, or after a few seconds have elapsed. You’ll still run into the stylesheet loading issues, though—if you want to make it work as smoothly as the browser, you’ll need various onload/onerror handlers on <link> elements and the likes. Browsers do a lot of heavy lifting like this that is impossible, hard or fiddly to implement in JavaScript.

Another compromise that some have used is a timed animation so that if the code hasn’t finished loading and executing within a certain time frame, what’s visible is rendered anyway. Google’s AMP used this approach, and made a serious mess of it in its first release, hiding stuff for up to 8 seconds. This approach is fairly uniformly inferior to the previous paragraph’s approach.