How to prevent the sidebar from displaying for split second on page load?

Question

Using Alpine.js + TailwindCSS.

Whenever the page reloads, the sidebar shows itself for a split second then closes. I can't find out why it happens.

I even tried to add the block class to the <aside> element and then dispalying it whenever the sidebar open like so: :class="open ? 'translate-x-0 block' : '-translate-x-full'" but that didn't work either

This is how it looks:

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
    <nav x-data="{ open: false, toggle() { this.open = ! this.open } }" class="flex w-full items-center justify-between px-6 h-16 bg-white text-gray-700 border-b border-gray-200 z-10">
        <div class="flex flex-row-reverse items-center">
            <button @click="toggle(open)" class="mr-2" aria-label="Open Menu">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8">
                    <path d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>
        </div>

        <transition enter-class="opacity-0" enter-active-class="ease-out transition-medium" enter-to-class="opacity-100" leave-class="opacity-100" leave-active-class="ease-out transition-medium" leave-to-class="opacity-0">
            <div x-show="open" class="z-10 fixed inset-0 transition-opacity">
                <div @click="toggle()" class="absolute inset-0 bg-black opacity-50" tabindex="0"></div>
            </div>
        </transition>
        <aside class="transform top-0 left-0 w-64 bg-white fixed h-full overflow-auto ease-in-out transition-all duration-300 z-30" :class="open ? 'translate-x-0' : '-translate-x-full'">
            <div class="flex">
                <span class="flex w-full items-center p-4 border-b">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path d="M12 14l9-5-9-5-9 5 9 5z" />
                        <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
                    </svg>
                </span>

                <span class="flex w-full items-center p-4 border-b">
                    <svg @click="toggle()" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" style="cursor: pointer;">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </span>
            </div>
            <span class="flex items-center p-4 hover:bg-indigo-500 hover:text-white "><span class="mr-2">
                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
                        <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                    </svg>
                </span>
                <span>Home</span></span>
        </aside>
    </nav>

Info: this seems to be browser-specific. On Windows, the issue shows in Firefox, but not in Chrome. — Sarah Groß
– Sarah Groß, Commented Jul 27, 2021 at 13:01
For me it shows on both, it might not show on every refresh but it definitely shows up after only a few refreshes — pileup
– pileup, Commented Jul 27, 2021 at 14:08

pileup · Accepted Answer · 2021-07-27 18:28:57Z

7

It seems Alpine has this known issue. From the official docs:

Sometimes, when you're using AlpineJS for a part of your template, there is a "blip" where you might see your uninitialized template after the page loads, but before Alpine loads.

Source: cloak - Alpine.js

So the workaround is to add a global style: [x-cloak] { display: none !important; } and then add the x-cloak directive for every element that "blips"

answered Jul 27, 2021 at 18:28

pileup

3,4626 gold badges32 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akugbe Stephen · Accepted Answer · 2021-07-29 09:03:14Z

5

Add "x-cloak" to the third line of your code and then in your css file, add the following:

[x-cloak] {display: none;}

This should fix the error

answered Jul 29, 2021 at 9:03

Akugbe Stephen

1577 bronze badges

Collectives™ on Stack Overflow

How to prevent the sidebar from displaying for split second on page load?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related