Collapsible sidebar with Alpine shows itself for split second on page load

[stackerito]

I have a weird bug where the sidebar with<aside> tag shows itself for a split second when the page loads. It should be hidden unless you click the Hamburger. But it keeps showing up for a split second.
This is the code: https://codepen.io/Stackerito/pen/ExmQQJa

[KevinBatdorf]

Check out x-cloak

https://alpinejs.dev/directives/cloak

[stackerito]

Yep that worked, but I had to manually write x-cloak for multiple elements, not the best practice.. I hope they will fix this issue.. it feels like they made this x-cloak as a workaround for a bug instead of addressing the real issue

[alexej-d]

How should you fix that? HTML is rendered before Javascript kicks in. There is no other way to do that if you are not using a framework like React or Vue

[stackerito]

I thought they could find a solution like they do in React or Vue, but now that you specifically mentioned these two, I guess it's something deeper than I understand 😁

[SimoTod]

Vue has v-cloak to address the same problem in certain cases.

[stackerito]

@SimoTod thank you! Just saw it - good to know