#Skeleton

Placeholder loading indicators that mirror content layout.

#When to Use

• While content is loading to prevent layout shift
• To give users a sense of the upcoming content structure
• As an alternative to spinners for card/list loading states

#Import

import { Skeleton } from "orizon";

#Examples

#Basic

<Skeleton />

#Active Animation

<Skeleton active />

#With Avatar

<Skeleton avatar active />

#Sub-components

<Skeleton.Avatar active />
<Skeleton.Button active />
<Skeleton.Input active />
<Skeleton.Image />

#API

#SkeletonProps

• loading — boolean — Show skeleton (hides children when true)
• active — boolean — Show animation (default: false)
• avatar — boolean | AvatarProps — Show avatar placeholder
• title — boolean | { width } — Show title placeholder (default: true)
• paragraph — boolean | { rows, width } — Show paragraph lines (default: true)
• round — boolean — Round corners (default: false)

#Sub-components

• Skeleton.Avatar — Avatar placeholder (size, shape, active)
• Skeleton.Button — Button placeholder (size, shape, active, block)
• Skeleton.Input — Input placeholder (size, active)
• Skeleton.Image — Image placeholder (active)
• Skeleton.Node — Custom node placeholder (active, children)