Basic: Demonstrates the fundamental usage of Skeleton component.

- Toggle the loading state to see the transition effect. - When loading is true, the wrapped content displays as a skeleton. - When loading is false, the actual content is revealed with a smooth transition.

Standalone: Demonstrates Skeleton as an independent placeholder element.

- Use without children to create standalone skeleton placeholders. - Specify dimensions using `width` and `height` props. - Accepts both number (pixels) and string (any CSS unit) values. - Useful for creating custom loading layouts before content structure is known.

StandaloneLayout: Shows how to build a complete loading layout using standalone Skeletons.

- Creates a card-like loading state without actual content components. - Useful when the actual content structure hasn't been loaded yet. - Demonstrates combining multiple standalone Skeletons for complex layouts.

LoadingProp: Shows how to control individual Skeleton components with the `loading` prop.

- Each Skeleton can be controlled independently. - When `loading` is true, children are hidden and replaced with a skeleton effect. - Useful for granular control over different parts of the UI.

SkeletonProviderUsage: Demonstrates unified loading control with SkeletonProvider.

- Wrap multiple Skeleton components with SkeletonProvider. - All nested Skeletons inherit the loading state from the provider. - Individual Skeleton `loading` props take precedence over provider. - Ideal for page-level or section-level loading states.

ProfileCard: Real-world example of a user profile card with skeleton loading.

- Shows a complete profile layout with avatar, name, title, and action buttons. - Demonstrates how Skeleton preserves the layout structure during loading. - Each element maintains its size and position for a smooth loading experience.

FormLayout: Demonstrates skeleton loading for form elements.

- Shows a typical form with text inputs and a textarea. - Skeleton maintains form field dimensions during loading. - Action buttons are also wrapped for a complete loading experience.

ListItems: Shows skeleton loading for list-based layouts.

- Each List.Item is wrapped with Skeleton individually. - Maintains consistent item heights and spacing during loading. - Ideal for data-driven lists, feeds, or navigation menus.

TransitionEffect: Demonstrates the smooth transition animation.

- Shows how Skeleton transitions smoothly between loading and loaded states. - Both entering (content → skeleton) and leaving (skeleton → content) have transitions. - The transition is powered by CSS transitions on background, border, and opacity.

MixedContent: Shows a complex layout combining multiple component types.

- Demonstrates how SkeletonProvider can control a diverse set of elements. - Includes headings, paragraphs, buttons, and cards. - Represents a typical page section with mixed content types.