Skeleton

Skeleton Component

The Skeleton component provides various types of loading placeholders (skeleton screens) to improve perceived loading performance. It supports text lines, images, tables, avatars, and a default block style, all with a pulsing animation.

Example Usage

<x-skeleton type="image" />

Props

• type (string, default: "text")
  Defines the skeleton style. Supported values: text, image, table, avatar, or any other value for a default block.

• tableRows (int, default: 3)
  Number of rows to display when type is set to "table".

• tableColumns (int, default: 4)
  Number of columns per row when type is "table".

Overview

This Skeleton component is a versatile loading placeholder for different UI elements. It animates placeholders for text lines, images, tables, and avatars, enhancing UX during data loading. The component uses Tailwind CSS for styling and animation and includes accessibility features like aria-hidden and screen reader text for loading indication.