Skeleton

Import and live example#

Three static loading lines representing report rows.

import {registerAeliqoElements} from "@varendo/web";
import {
  AeliqoAlertElement,
  AeliqoDialogElement,
  AeliqoDrawerElement,
  AeliqoEmptyStateElement,
  AeliqoPopoverElement,
  AeliqoProgressElement,
  AeliqoSkeletonElement,
  AeliqoToastElement,
  AeliqoTooltipElement,
} from "@varendo/web/feedback";



registerAeliqoElements();

const host = document.querySelector<HTMLElement>("#aeliqo-example") ?? (() => {
  const created = document.createElement("div");
  created.id = "aeliqo-example";
  (document.body ?? document.documentElement).append(created);
  return created;
})();

function createCatalogRoot(container: HTMLElement): HTMLElement {
  const root = document.createElement("div");
  root.dataset.catalogSourceRoot = "true";
  root.style.display = "grid";
  root.style.gap = "12px";
  container.append(root);
  return root;
}

function createCatalogElement<T extends HTMLElement>(tagName: string, container: HTMLElement): T {
  const element = document.createElement(tagName) as T;
  element.setAttribute("data-aeliqo-theme", "light");
  container.append(element);
  return element;
}

function appendSlottedText(root: HTMLElement, slot: string, textContent: string): void {
  const content = document.createElement("span");
  content.slot = slot;
  content.textContent = textContent;
  root.append(content);
}

const root = createCatalogRoot(host);
(((root) => {
		const element = createCatalogElement<AeliqoSkeletonElement>("aeliqo-skeleton", root);
		element.label = "Loading report rows";
		element.lines = 3;
		element.variant = "text";
		element.animated = false;
	}))(root);

Purpose#

Reserves a visible shape for content that is still loading. Line count and variant describe the expected geometry; the host replaces it with the real result.

When to use it#

• Content is loading and its rough shape is already known.
• You want to reserve space so the layout does not jump.
• Reduced-motion settings should stop the pulse animation.

When to use a different component#

• Use Progress when the host can measure real progress.
• Use EmptyState once the result is known to be empty.

Properties and defaults#

Skeleton is a temporary visual placeholder; it must be replaced by an explicit ready, empty, or error result.

Events#

• None; placeholder has no action

States and failure handling#

Relevant states:

• loading

Expected result: The loading placeholder communicates pending content without inventing data.

The text variant renders between one and twelve lines, clamping an out-of-range lines value; rectangular and circular variants render one shape. Reduced motion turns off the pulse animation. The skeleton carries a loading status, but it cannot tell whether a request later became empty, denied, or failed.

Keyboard, focus, and accessibility#

Keyboard behavior:

• Not focusable

Exposed semantics:

• aria-busy
• aria-hidden
• aria-label
• role

Responsive behavior#

Match the width of the content it replaces without forcing horizontal scroll. Reduced-motion settings stop its animation.

Style hooks#

• Shadow parts: line, skeleton
• Varendo design tokens referenced: --aeliqo-color-border, --aeliqo-radius-small, --aeliqo-space-8

Related components#

• Progress
• EmptyState

Generated TypeScript declaration#

export declare class AeliqoSkeletonElement extends AeliqoFoundationElement {
    static readonly properties: {
        label: {
            type: StringConstructor;
        };
        lines: {
            type: NumberConstructor;
        };
        variant: {
            type: StringConstructor;
        };
        animated: {
            type: BooleanConstructor;
        };
    };
    static readonly styles: import("lit").CSSResult[];
    label: string;
    lines: number;
    variant: AeliqoSkeletonVariant;
    animated: boolean;
    protected render(): import("lit").TemplateResult<1>;
}

Version#

This page documents the Varendo 0.6 component contract.