cnc-processing
A blocking full-viewport spinner with a title and a line of explanation. It has no open property and no dismissal — it is showing whenever it is in the document, so you control it by rendering it or not.
Quick start
Put it behind an x-if on the state that says work is in flight. The overlay is
fixed inset-0, so wherever it sits in the markup it covers the whole viewport.
<div x-data="{ busy: false }">
<cnc-button @press="busy = true">Save</cnc-button>
<template x-if="busy">
<cnc-processing title="Saving..." content="Please wait."></cnc-processing>
</template>
</div>Usage guidance
This overlay BLOCKS the whole page, so reserve it for work that genuinely stops everything
— a sign-in, a migration, a submit that must not be repeated. For anything scoped to one
part of the screen use a button's own processing state or a
cnc-skeleton
in the region that is loading, and leave the rest of the page usable.
It offers no way out: no Escape, no backdrop click, no cancel. If the work can fail or hang, put
a cancel control in the content slot and make sure whatever renders the overlay can
un-render it — a request that never returns otherwise leaves the user with a page they
must reload.
Say what is happening and roughly how long in title and content. The
defaults are a placeholder, and a blocking overlay that only says "Loading..." gives
someone no way to judge whether to wait.