Preventing UI Flash with Alpine.js and CSS

Introduction When using Alpine.js to control the visibility of elements, a brief flash of unstyled content (FOUC) can occur before Alpine.js initializes. This is especially noticeable on slower devices or when loading Alpine.js asynchronously. This post describes how to eliminate this flicker using a simple CSS rule. The Problem: Modal Flash Imagine a modal that should only be visible after Alpine.js has initialized. Without proper precautions, the modal might briefly appear in its default, unstyled state before Alpine.js takes over and hides it. On some browsers, notably Safari, this flash can even result in the modal becoming stuck and uncloseable if Alpine.js hasn't fully loaded. The Solution: x-cloak and CSS Alpine.js provides the x-cloak directive, which adds the attribute x-cloak to an element. We can then use CSS to hide elements with this attribute. The key is to ensure this CSS rule is applied early in the rendering process. Here's the CSS rule: [ x-cloak ] { display : none !i