Alpine: x-show content flashes before disappearing on page load

[splashsky]

Hey guys! Not sure if this has been addressed at any point before, and it might simply be a limitation of DOM behavior, but I have tabs and a modal that use Alpine to hide them prior to user interaction. When I refresh the page, for the briefest moment, all of these elements meant to be hidden are visible, even using the x-cloak and x-show attributes. Is there a way to address this?

[mblarsen]

Be sure that you've added [x-cloak] to your style sheet somewhere. Or even better add it to your HTML head so that it is there before you stylesheets load:

        <style>
            [x-cloak] {
                display: none;
            }
        </style>

[ryangjchandler]

@mblarsen has provided the correct answer, Alpine doesn't provide the styling for x-cloak since each developer will have their own way of hiding an element but display: none; is the generally best way to do it.

[splashsky]

For future reference, I fixed the problem by adding just a classless div wrapper over the element I was hiding and added the x-cloak and x-show attributes to that instead.

My best guess is that it was rendering my content first, then applying hidden over the top of it, which led to the issue I had.

[XaBerr]

Hi, I've the same problem!
I've tried all the suggested solutions but none of them worked.

The function I’m using is "x-show"

<div x-show="showModalDelete" x-on:click.away="showModalDelete = false" class="fixed bottom-0 inset-x-0 px-4 pb-4 sm:inset-0 sm:flex sm:items-center sm:justify-center">
        <div class="fixed inset-0 transition-opacity">

I've also tried :style="showModalDelete ? 'display:flex' : 'display:none'"

[KevinBatdorf]

@XaBerr Did you add x-cloak? It's not in your markup there.

Also, I typically will use !important on the x-cloak style rule:

<style>
  [x-cloak] { display: none !important; }
</style>

[XaBerr]

@XaBerr Did you add x-cloak? It's not in your markup there.

Also, I typically will use !important on the x-cloak style rule:

<style>
  [x-cloak] { display: none !important; }
</style>

Yes, now is working! Ty!