prevent-hidden-element-from-flickering-on-load.md

Prevent Hidden Element From Flickering On Load

Here is what it might look like to use Alpine.js to sprinkle in some JavaScript for controlling a dropdown menu.

<div x-data="{ profileDropdownOpen: false }">
  <button
    type="button"
    @click="profileDropdownOpen = !profileDropdownOpen"
  >
    <!-- some inner html -->
  </button>
  <div x-show="profileDropdownOpen" role="menu">
    <a href="/profile" role="menuitem">Your Profile</a>
    <a href="/sign-out" role="menuitem">Sign Out</a>
  </div>
</div>

Functionally that will work. You can click the button to toggle the menu open and closed.

What you might notice, however, when you refresh the page is that the menu flickers open as the page first loads and then disappears. This is a quirk of the element being rendered before Alpine.js is loaded and the x-show directive has a chance to take effect.

To get around this, we can cloak any element with an x-show directive that should be hidden by default.

<div x-data="{ profileDropdownOpen: false }">
  <button
    type="button"
    @click="profileDropdownOpen = !profileDropdownOpen"
  >
    <!-- some inner html -->
  </button>
  <div x-cloak x-show="profileDropdownOpen" role="menu">
    <a href="/profile" role="menuitem">Your Profile</a>
    <a href="/sign-out" role="menuitem">Sign Out</a>
  </div>
</div>

This addition needs to be paired with some custom CSS to hide any cloaked elements.

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

source