Skeleton

#Introduction

The Skeleton component provides loading placeholders that mimic the structure of your content while data is being fetched. It offers multiple animation styles and a flexible API for creating custom loading states that match your UI perfectly.

#Installation

Use the sheaf artisan command to install the skeleton component easily:

php artisan sheaf:install skeleton

then add this css to your app.css:

@keyframes wave {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(200%);
    }
}

Once installed, you can use the <x-ui.skeleton /> and <x-ui.skeleton.text /> components in any Blade view.

#Usage

#Basic Skeleton

The most basic usage is a simple placeholder with custom dimensions:

<x-ui.skeleton class="h-8 w-40" />
<x-ui.skeleton class="h-4 w-full" />
<x-ui.skeleton class="size-12 rounded-full" />

#Animation Variants

Choose from different animation styles to match your design preference:

<!-- Pulse animation  -->
<x-ui.skeleton animate="pulse" class="h-8 w-80" />

<!-- Wave animation -->
<x-ui.skeleton animate="wave" class="h-8 w-80" />

<!-- Glow animation (default) -->
<x-ui.skeleton animate="glow" class="h-8 w-80" />

<!-- No animation -->
<x-ui.skeleton animate="none" class="h-8 w-80" />

#Animation Speed

<!-- slow animation  -->
<x-ui.skeleton speed="slow" speed class="h-10 w-80" />

<!-- normal animation (default) -->
<x-ui.skeleton speed="normal" class="h-10 w-80" />

<!-- fast animation -->
<x-ui.skeleton speed="fast" class="h-10 w-80" />

#Text Skeleton

Use the skeleton.text component for text line placeholders with predefined heights:

<!-- Small text -->
<x-ui.skeleton.text size="sm" />

<!-- Base text (default) -->
<x-ui.skeleton.text />

<!-- Large text -->
<x-ui.skeleton.text size="lg" />

<!-- Extra large text -->
<x-ui.skeleton.text size="xl" />

#Examples

#Card Skeleton

Create complex loading states by combining skeleton components:

<div class="rounded-box border border-neutral-200 dark:border-neutral-800 p-4 space-y-4">
    <!-- Header -->
    <div class="flex items-center gap-3">
        <x-ui.skeleton class="size-10 rounded-full" />
        <div class="flex-1 space-y-2">
            <x-ui.skeleton.text class="w-32" />
            <x-ui.skeleton.text size="sm" class="w-24" />
        </div>
    </div>
    
    <!-- Content -->
    <div class="space-y-2">
        <x-ui.skeleton.text />
        <x-ui.skeleton.text class="w-5/6" />
    </div>
    
    <!-- Image -->
    <x-ui.skeleton class="h-48 w-full rounded-box" />
    
    <!-- Actions -->
    <div class="flex gap-4 pt-2">
        <x-ui.skeleton class="h-8 w-20 rounded-box" />
        <x-ui.skeleton class="h-8 w-20 rounded-box" />
    </div>
</div>

#Grid Skeleton

For card grids and gallery layouts:

<div class="grid grid-cols-3 gap-4">
    @foreach(range(1, 6) as $i)
        <div class="space-y-3">
            <x-ui.skeleton class="h-48 w-full rounded-box" />
            <x-ui.skeleton.text class="w-3/4" />
            <x-ui.skeleton.text size="sm" />
        </div>
    @endforeach
</div>

#Table Skeleton

Use with tables and data grids:

<table class="w-full">
     <thead class="text-base font-normalt">
        <tr>
            <th>#</th>
            <th>Number</th>
            <th>Status</th>
            <th>Punishments</th>
        </tr>
    </thead>
    <tbody class="divide-y divide-neutral-200 dark:divide-neutral-800">
        @foreach(range(1, 5) as $i)
            <tr>
                <td class="px-4 py-3"><x-ui.skeleton.text /></td>
                <td class="px-4 py-3"><x-ui.skeleton.text /></td>
                <td class="px-4 py-3"><x-ui.skeleton.text /></td>
                <td class="px-4 py-3"><x-ui.skeleton.text /></td>
            </tr>
        @endforeach
    </tbody>
</table>

#Component Props

#ui.skeleton

#ui.skeleton.text