LayoutSkeleton

Layout-level placeholder for page or panel loading.
Status: Beta

Demo

Layout Placeholder

The wrapper controls the size.

 Copy<template>
  <div style="height: 240px;">
    <TxLayoutSkeleton />
  </div>
</template>

Basic Usage

<template>
  <div style="height: 240px;">
    <TxLayoutSkeleton />
  </div>
</template>

Usage Notes

• The wrapper controls size and layout ratio.
• Ideal for page-level loading with consistent rhythm.
• Content line widths use a fixed sequence, keeping SSR, hydration, and tests deterministic.

API (Brief)

Interaction Contract

• TxLayoutSkeleton has no props, events, or slots.
• The component always renders a header, 6 sidebar items, and 8 content lines.
• Content line widths are deterministic and do not depend on runtime randomness.

Composite Patterns

Panel Placeholder

Skeleton paired with card containers.

 Copy<template>
  <TxCard>
    <TxLayoutSkeleton />
  </TxCard>
</template>