Skeleton

Skeleton in WebJET Elements is not a separate tag like wje-button or wje-card. It is a loading pattern built into base WJElement that temporarily displays a placeholder markup during asynchronous rendering.

If the custom element already reads data asynchronously, just enable the skeleton attribute and add a placeholder via slot="skeleton" or hook renderSkeleton().

Basic use

The most common scenario is integration via slot="skeleton". The element keeps its standard async renderer and only temporarily displays a placeholder that copies the final layout while waiting for .

Delay and minimum duration

The skeleton-delay and skeleton-min-duration attributes are used to suppress flicker. Delay the skeleton and at least duration hold it for a moment after the display so that the transition doesn't look jerky.

renderSkeleton() in a custom element

If you are creating a custom component on top of WJElement, you can return the placeholder directly from the renderSkeleton() hook. This approach is appropriate when the skeleton is to be part of the component implementation and not external slotted content.

When to use

Use a skeleton when the component loads content asynchronously and you want to maintain a stable layout while waiting, without environment hopping.

When not to use

Do not use a skeleton as a replacement for an empty state, error state, or spinner in places where you do not yet know the shape of the resulting content.

Accessibility

The skeleton should not be the only carrier of state information. For important scenarios, also add a text loading status, aria-busy, or a clear indication that the content is still loading.

Recommended practices

• Keep the placeholder as close to the final layout as possible.
• Prefer slot="skeleton" for integration and renderSkeleton() for component authors.
• Increase skeleton-delay only where you realistically struggle with flickering on short requests.
• Use skeleton-min-duration sparingly so that the loading does not appear artificially long.

Attributes and properties

Name	Type	Default	Description
skeleton	boolean	false	Enables skeleton mode during async render.
skeleton-delay	number	150	The delay in milliseconds after which the skeleton can be displayed.
skeleton-min-duration	number	300	Minimum skeleton visibility in milliseconds after it has already shown up once.
skeletonDelay	property\<number>	150	Property alias to the skeleton-delay attribute.
skeletonMinDuration	property\<number>	300	Property alias to the skeleton-min-duration attribute.

Events

Name	Detail	Description
wj-skeleton:show	{ delay }	The skeleton has realistically shown up.
wj-skeleton:skip	{ reason: 'render-finished-fast', elapsedMs, delay }	The render finished before the delay expired, so the skeleton didn't show up.
wj-skeleton:hide	most frequent { reason: 'render-finished', visibleMs, delay, minDuration }, fallback { reason: 'finally' }	After the standard render cycle comes render-finished. For some paths, especially direct calls to display(), there may be an additional fallback finally, so it is a good idea to follow the value of reason.

Slots

Name	Description
skeleton	Placeholder markup displayed during loading state. Preferred integration method.

Methods and hooks

Name	Description
renderSkeleton(params)	Optional hook to return skeleton markup when creating a custom element over WJElement.