Skeleton

Usage

Skeleton

Text and avatar placeholders

Card Placeholder

Skeletons inside cards for feeds.

Best Practices

• Match skeleton width, height, line count, and radius to the final content so loading does not create a second layout.
• Use TxSkeleton for configurable text, rectangle, and avatar placeholders; use TxCardSkeleton or TxListItemSkeleton when their fixed structure matches the final surface.
• Keep loading=false as the handoff point to real content instead of rendering skeleton and content in separate branches.
• Do not use skeletons as decorative gray chrome. If the final content is unknown, prefer a neutral empty or loading state with copy.
• For a table, use TxDataTable with loadingVariant="skeleton": it draws placeholder rows shaped like its columns on the first load and keeps the rows during a refresh. Its default loading overlay suits a short local wait.

API Reference

Props

Events

TxSkeleton, TxCardSkeleton, and TxListItemSkeleton do not emit custom events.

Slots

Preset Components

Dashboard Data Operations

For table loading, TxDataTable's loadingVariant="skeleton" draws the placeholder rows itself, and a short local wait can keep its default overlay; side summaries beside the table use TxSkeleton to preserve layout rhythm.

Overview

• loading=false renders the default slot instead of the skeleton.
• lines always renders at least one item, preventing empty skeleton output.
• variant="circle" always uses a circular radius and ignores radius.
• The TxSkeleton root is aria-hidden="true", so the decorative shimmer is not announced. Let the host region own the loading announcement (for example aria-busy or a polite live region), then hand off to real content at loading=false.

Technologies

• Reviewed against packages/tuffex/packages/components/src/skeleton/src/types.ts, TxSkeleton.vue, TxCardSkeleton.vue, TxListItemSkeleton.vue, and skeleton.test.ts.
• Existing tests cover CSS-variable emission, numeric-to-px conversion, line count clamping, circle radius normalization, the decorative aria-hidden root, loading=false slot handoff, fixed preset rendering, and install registration.
• API note: TxSkeleton is the configurable primitive; TxCardSkeleton and TxListItemSkeleton are fixed-shape presets with no props, events, or slots.
• Rendering note: variant="circle" forces --tx-skeleton-radius: 999px; callers should set matching width and height for a true circle.
• Component source: packages/tuffex/packages/components/src/skeleton/src/TxSkeleton.vue, TxCardSkeleton.vue, and TxListItemSkeleton.vue.
• Types: packages/tuffex/packages/components/src/skeleton/src/types.ts exports SkeletonProps and SkeletonVariant.
• Verified coverage: packages/tuffex/packages/components/src/skeleton/__tests__/skeleton.test.ts verifies CSS variable output, numeric-to-px conversion, line clamping, circle radius, the decorative aria-hidden root, loading=false slot handoff, preset rendering, and install registration.