How to hide flashing dialog content when page is loading?

Question

On tailwindcss, Alpinejs page I use modal which is opened by click on button. Problem is that while page is loading I see flashing dialog content. I tried to set hidden class to modal window and in the end of init method to set isPageLoaded variable into true

<div class="overflow-auto border-2 border-grey-900" x-data="app()" x-init="appInit()">

    <div class="w-full h-full">
        <button
            type="button"
            class="bg-transparent border border-gray-500 hover:border-indigo-500 text-gray-500 hover:text-indigo-500 font-bold py-2 px-4 rounded-full"
            @click="showModal = true"
        >Open modal
        </button>
    </div>
    <!--Overlay-->

    <div class="overflow-auto w-full h-full hidden" style="background-color: rgba(0,0,0,0.5)" x-show="showModal" :class="{ 'fixed inset-0 z-10 flex items-center justify-center': showModal, 'visible' : isPageLoaded }">

...
<script>

    function app() {
        return {
            showModal : false,
            isPageLoaded : false,

            appInit: function () {
                console.log('appInit::')
                this.isPageLoaded= true
            },

        }
    }

</script>

As a result I do not see flashing dialog content, but I can not show dialog modal, which I tried to set with:

'visible' : isPageLoaded

I mean to toggle hidden class I set by default. But that does not work.

Could you please check pen : https://codepen.io/petrogromovo/pen/yLMNVLr

Thanks in advance!

Answer 1

Use x-cloak to hide elements from display until Alpine has fully loaded. https://github.com/alpinejs/alpine#x-cloak

Add the x-cloak attribute to any element that you want to hide, and add this rule to your stylesheet.

[x-cloak] { display: none; }