mirror of
https://github.com/jbranchaud/til
synced 2026-01-03 15:18:01 +00:00
56 lines
1.6 KiB
Markdown
56 lines
1.6 KiB
Markdown
# Prevent Hidden Element From Flickering On Load
|
|
|
|
Here is what it might look like to use [Alpine.js](https://alpinejs.dev/) to
|
|
sprinkle in some JavaScript for controlling a dropdown menu.
|
|
|
|
```html
|
|
<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`](https://alpinejs.dev/directives/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.
|
|
|
|
```html
|
|
<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.
|
|
|
|
```css
|
|
[x-cloak] { display: none !important; }
|
|
```
|
|
|
|
[source](https://alpinejs.dev/directives/cloak)
|