FOUC — flash of unstyled content

FOUC.js

// see https://stackoverflow.com/questions/3221561/eliminate-flash-of-unstyled-content
//
// The problem with using a css style to initially hide some page
// elements, and then using javascript to change the style back to
// visible after page load, is that people who don't have javascript
// enabled will never get to see those elements.
//
// so, use javascript to both initially hide as well as redisplay
// those elements after page load
//

/**
 * FOUC prevention
 */
document.body.style.opacity = 0
document.body.style.visiblity = 'hidden'

window.addEventListener('load', () => {
    document.body.style.visibility = 'visible'
    document.body.style.opacity = 1
})

// + some CSS for transition