Hiding elements until Alpine loads with `x-cloak`

`x-cloak` can be used to hide elements until Alpine has initialised all components and has control of them.

Published 8 months ago | Updated 8 months ago

If you've used Alpine before, you might have seen a brief flick when you load your site up. This is common if you have components that are conditionally rendered and are hidden by default.

What's happening is the DOM is ready before Alpine takes controls of the element, so it shows up and then disappears. It can be quite jarring if you have lots of components on your site.

To counter the problem, Alpine will look for an x-cloak attribute and remove it once it has loaded. This lets you defined some CSS that will set the element to display: none when the page loads.

Add this bit of CSS to your site:

[x-cloak] {
    display: none !important;

And Bob's your uncle, the flicker problem has been fixed!

Got some feedback for me? Let me know on Twitter, or send me an email at hiding-elements-until-alpine-is-ready-with-x-cloak-feedback@ryangjchandler.co.uk.