Skeleton

53 · Extended UI

A gray, softly pulsing placeholder that stands in for content while it loads. By imitating the shape of the real content, it keeps the page from jumping once loading finishes.

PRO acun:skeleton

Variants

The shape is chosen with variant; the default is block. text is the height of a line of text, circle is for round elements such as avatars. Width and height are not fixed in the component; set them with class.

LIVE EXAMPLE

<div class="flex items-center gap-4">
    <acun:skeleton class="h-16 w-24" />
    <acun:skeleton variant="circle" class="size-12" />
    <div class="flex-1 space-y-2">
        <acun:skeleton variant="text" />
        <acun:skeleton variant="text" class="w-2/3" />
    </div>
</div>

Prop	Values
`variant`	block \| text \| circle
`class`	Size classes (e.g. h-16 w-24, size-12, w-2/3)

Card skeleton

Combine the parts to sketch the card that will load. Keeping the line widths different makes the skeleton look like real text.

LIVE EXAMPLE

<acun:card>
    <div class="flex items-center gap-3">
        <acun:skeleton variant="circle" class="size-10" />
        <div class="flex-1 space-y-2">
            <acun:skeleton variant="text" class="w-2/3" />
            <acun:skeleton variant="text" class="w-1/3" />
        </div>
    </div>
    <acun:skeleton class="mt-4 h-24" />
</acun:card>

List skeleton

While a table or list loads, generate a skeleton of a few rows with a loop. Keep the number of rows close to the number of records expected on the page.

LIVE EXAMPLE

<div class="divide-y divide-gray-100 rounded-sm bg-white shadow-sm dark:divide-zinc-800 dark:bg-zinc-900">
    @foreach (range(1, 4) as $row)
        <div class="flex items-center gap-4 px-4 py-3">
            <acun:skeleton variant="text" class="w-1/3" />
            <acun:skeleton variant="text" class="w-1/5" />
            <acun:skeleton class="ms-auto h-5 w-14 rounded-full" />
        </div>
    @endforeach
</div>

With Livewire

While a Livewire action runs, show the skeleton with wire:loading and hide the real content with wire:loading.remove. Tie them to the relevant action only with wire:target.

BLADE

<div wire:loading wire:target="refreshReport" class="w-full space-y-2">
    <acun:skeleton variant="text" class="w-3/4" />
    <acun:skeleton variant="text" class="w-1/2" />
</div>

<div wire:loading.remove wire:target="refreshReport">
    @include('reports.summary')
</div>

API

Props and slots

The values the component accepts.

Prop	Default	Description
`variant`	`block`	block · text (h-3) · circle; the size is set with class