Issue with Alpinejs' X-Cloak
I'm Using Tailwindcss and Alpinejs in My Project And, When Loading the Login Page, for a Brief Moment There Is a Flash of the Header Dropdowns Opening. for...
I'm using TailwindCSS and AlpineJS in my project and, when loading the login page, for a brief moment there is a flash of the header dropdowns opening. For this, I try to use x-cloak, but it is not working properly and I cannot understand why, since I used it on other pages and it worked perfectly.
This is my code snippet:
<!-- Header -->
<nav x-data="{ showMenu: false, resourcesOpen: false, learnOpen: false }" class="bg-blue-800 shadow-xs">
<div class="max-w-full px-4 lg:px-6">
<div class="flex justify-between h-16">
<!-- Mobile menu button -->
<!-- Left Side -->
<div class="flex flex-row">
<!-- Logo -->
<a class="flex items-center justify-center mr-12" href="#">
<img class="hidden w-auto h-10 lg:block" src="/img/logo/angel-white-lg.png" alt="Angel Logo">
<img class="block w-auto h-10 lg:hidden" src="/img/logo/angel-white-sm.png" alt="Angel Logo">
</a>
<!-- Dropdowns -->
<div class="hidden lg:flex">
<!-- Resources -->
<div x-cloak @mouseleave="resourcesOpen = false" class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex" id="nav-heading" aria-labelledby="nav-heading" x-cloak :aria-expanded="resourcesOpen">
<button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100" :aria-expanded="resourcesOpen" aria-controls="nav-list" @mouseenter="resourcesOpen = !resourcesOpen" @click.away="resourcesOpen = false">
Recursos
</button>
<div x-show.transition.in.duration.300ms.origin.top.left.opacity.scale.10.out.duration.300ms.origin.top.left.opacity.scale.10="resourcesOpen === true" id="nav-list" style="padding-left: 221px" class="absolute left-0 z-50 w-screen origin-top-left bg-blue-800 shadow-lg top-16">
<!--
Trade dropdown panel, show/hide based on dropdown state.
-->
<div class="flex w-screen py-2 bg-blue-800 shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<div class="flex flex-col">
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Security
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Estrutura de Taxas
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Founding Options
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Staking
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
24/7 Support
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Liquidity
</a>
</div>
<div class="flex flex-col">
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Margin Trading
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Índices
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Futures
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
OTC
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Account Management
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Cryptowatch
</a>
</div>
</div>
</div>
</div>
<!-- Prices -->
<div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
<button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100">
Preços
</button>
</div>
<!-- Learn -->
<div x-cloak @mouseleave="learnOpen = false" class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex" id="nav-heading" aria-labelledby="nav-heading" x-cloak :aria-expanded="learnOpen">
<button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100" :aria-expanded="learnOpen" aria-controls="nav-list" @mouseenter="learnOpen = !learnOpen" @click.away="learnOpen = false">
Learn
</button>
<div x-show.transition.in.duration.300ms.origin.top.left.opacity.scale.10.out.duration.300ms.origin.top.left.opacity.scale.10="learnOpen === true" id="nav-list" style="padding-left: 386px" class="absolute left-0 z-50 w-screen origin-top-left bg-blue-800 shadow-lg top-16">
<!--
Trade dropdown panel, show/hide based on dropdown state.
-->
<div class="flex py-2 bg-blue-800 shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<div class="flex flex-col">
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Crypto Guides
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Videos
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Podcast
</a>
</div>
</div>
</div>
</div>
<!-- Support -->
<div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
<button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100">
Support
</button>
</div>
<!-- Futures -->
<div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
<button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100">
Futures
</button>
</div>
<!-- Institutions -->
<div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
<button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100">
Institutions
</button>
</div>
</div>
</div>
</div>
</div>
<style>
[x-cloak] {
display: none;
}
</style>
And here's a screenshot of the flashes occurring when the page loads.
2 Answers
put the x-cloack on the outside nav
<nav
x-data="{ showMenu: false, resourcesOpen: false, learnOpen: false }"
class="bg-blue-800 shadow-xs"
x-cloak
>
notice that i put the x-cloak on the outside nav so it does not show the navigation at all before alpine initialize
We also need to add the following CSS on the relevant page. I just ran into this issue and found the CSS to add on the page from the official docs.
[x-cloak] { display: none !important; }
so the complete solution is adding x-cloak to the tag
<div x-cloak></div>
David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.
