cnc-skeleton
A placeholder block for content that has not arrived. It has no size of its own — it fills its container completely — so a skeleton is shaped by the box you put it in.
Quick start
Give it a sized wrapper. The widget is w-full h-full, so a skeleton with no
dimensions from its parent collapses to nothing — this is the mistake to know about before
any other.
<div class="h-12 w-12">
<cnc-skeleton shape="circle"></cnc-skeleton>
</div>
<div class="h-4 w-2/3">
<cnc-skeleton></cnc-skeleton>
</div>Usage guidance
A skeleton earns its place when it stands in for content whose SHAPE you already know — a card, an avatar, three lines of text. Where you cannot mirror the coming layout, a skeleton is just a grey box that moves the jank rather than removing it, and a spinner is the more honest signal.
The widget carries aria-busy="true" and aria-live="polite" itself, so
do not add your own loading announcement around it — a screen reader would hear the wait
twice.
Use it for a FIRST load. For content being refreshed in place, leaving the old values visible while they update tells the user more than replacing them with grey blocks.