Cloak

data-cloak hides an element until Datastar has initialised, preventing a flash of pre-hydration state — content that data-show will hide, a collapsed data-collapse panel, and so on. The plugin simply removes the attribute when the engine applies plugins to the element; a global CSS rule does the hiding.

No flash of hidden content

This paragraph starts closed. Without data-cloak it would be visible for a moment on page load, before Datastar applies data-show="$open".

<p data-show="$open" data-cloak>Hidden until Datastar boots.</p>

/* global stylesheet */
[data-cloak] {
  display: none !important;
}

The plugin

src/datastar/plugins/cloak.ts

import { attribute } from '@wrux/astro-datastar/engine';

/**
 * `data-cloak` hides an element until Datastar has initialised, preventing a
 * flash of pre-hydration state (e.g. content that `data-show` will hide).
 *
 * Pair with a `[data-cloak] { display: none !important; }` rule in the
 * global stylesheet.
 * The attribute is removed when the engine applies plugins to the element.
 */
attribute({
  name: 'cloak',
  requirement: { key: 'denied', value: 'denied' },
  apply({ el }) {
    el.removeAttribute('data-cloak');
  },
});