How to Use x-cloak to Handle Flickering in Alpine JS

When you are using alpine JS and load the page, at first, it displays the content for some milliseconds. In other words, you will have a flickering effect.

Using the x-cloak attribute in Alpine JS

According to alpine JS documentation, you can fix this issue with the x-cloak attribute. But before using x-cloak, you must add the following line in your CSS file.

Here is what your style will look like.

Now, you can add the x-cloak attribute to the opening tag where you are using x-data. Here is an example.

Let’s understand everything with an example. We have a button that will toggle a modal. If we don’t use the x-cloak attribute, the modal will start flickering every time the page loads.

How to Prevent Modal Flickering in Alpine JS

The code below uses TailwindCSS and Alpine JS to toggle a modal.

Now, add the following style in the head section.

After adding styles, add the x-cloak attribute to the tag where you are using x-data.

Conclusion

You can get rid of the flickering effect with the help of x-cloak and a single line of the stylesheet. You just have to make sure you are using x-cloak to the element which initializes the alpine JS with x-data.