Async
`<pura-async>` expresses a view's loading phases (loading, error, empty, ready) in markup, showing exactly one of its slots according to the `state` attribute, instead of imperative branching. Use it when a region depends on asynchronous data and you want to switch between spinner, error, empty, and ready content without display JS. The agent-native layer marks the region with `aria-busy` during loading, announces each transition in a dedicated sr-only live region, reflects stable `data-pura-id`/`data-state`, and registers the instance in `window.__puraAsync`, letting agents read any region's phase (via `window.__puraAsync.snapshot()`/`state(id)`) without traversing the DOM.
Preview
<pura-async id="conta" state="loading">
<div slot="error">Could not load the data. Please try again.</div>
<div slot="empty">No transactions found.</div>
<ul>
<li>Payment received: $1,200.00</li>
<li>Monthly subscription: $49.90</li>
</ul>
</pura-async>
<script type="module">
import "/pura/lib/async.js";
const el = document.getElementById("conta");
// Switch phase via the validated method (writes to the state attribute)
el.setState("ready");
el.addEventListener("statechange", (e) =>
console.log("state:", e.detail.previous, "->", e.detail.state)
);
// Agent-native reading, without traversing the DOM:
// window.__puraAsync.snapshot(); // [{ id, domId, state }]
// window.__puraAsync.state("conta");
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
state | string | idle | Current phase of the region. One of: idle | loading | error | empty | ready. A missing or unknown value is normalized to idle (renders nothing). It is the single source of truth; setState(s) only writes to this attribute. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/async.js"></script>import "./pura/lib/async.js";