Components load visible, and then disappear once Alpine loads

[LloydThinks]

Hi! I am new to AlpineJS, and I something worries me with what little expose I have so far. Every component with x-show="open" and some parent component with x-data="{ open: false }" loads VISIBLE at first, and then AlpineJS appears to catch up, and then they all disappear.

Is there a way to load the page with them not visible? After some time searching for "pre-loading" or some kind of "load page AFTER Alpine data loads" have returned no results.

Thank you for making such a beautiful JS interface, and I hope to resolve this one little thing.
Lloyd

[ryangjchandler]

@LloydThinks Add x-cloak to your elements that have x-show on them and add the following bit of CSS to your site too:

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

[LloydThinks]

Thank you very much! This was exactly what I was looking for.

Cheers!

[caner-aras]

thanks a lot! saved me.

[rajivmehta-github]

This was a pain area, a race condition, which is rectified with this workaround

[ekwoka]

This isn't a workaround. It's the official way :)