Rewrote all the docs - more noob friendly now.
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
+48
-56
@@ -1,78 +1,58 @@
|
||||
# Skeleton
|
||||
|
||||
An animated loading placeholder. Use it in place of real content while data is being fetched or rendered asynchronously. The animation communicates to the user that content is loading.
|
||||
An animated grey placeholder that pulsates while real content is loading. Think of it as a rough pencil sketch of your UI — it shows the user where something will appear so the page feels responsive even before the data is ready.
|
||||
|
||||
---
|
||||
|
||||
## HTML structure
|
||||
## Quick example
|
||||
|
||||
```
|
||||
div.animate-pulse.rounded-md.bg-muted.{classes}
|
||||
```csharp
|
||||
new Skeleton("h-4 w-3/4") // a loading line of text
|
||||
new Skeleton("h-10 w-full") // a loading input field
|
||||
new Skeleton("rounded-full h-12 w-12") // a loading avatar
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## CSS mechanics
|
||||
|
||||
| Class | Effect |
|
||||
|---|---|
|
||||
| `animate-pulse` | Tailwind's built-in fade-in/out animation (1.5s loop) |
|
||||
| `bg-muted` | Neutral muted background color from the theme |
|
||||
| `rounded-md` | Slightly rounded corners |
|
||||
| User-supplied `classes` | Control size and shape (e.g. `h-4 w-32`, `h-10 w-full`, `rounded-full h-12 w-12`) |
|
||||
|
||||
---
|
||||
|
||||
## Constructor signature
|
||||
## All the options
|
||||
|
||||
```csharp
|
||||
public Skeleton(string classes = "")
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
| Parameter | What it does |
|
||||
|---|---|
|
||||
| `classes` | Tailwind classes controlling size, shape, and spacing |
|
||||
| `classes` | Tailwind classes that control the size and shape of the placeholder. |
|
||||
|
||||
There are no other parameters. The component itself is just an animated `<div>` — you shape it entirely through CSS classes.
|
||||
|
||||
---
|
||||
|
||||
## Usage examples
|
||||
## Real-world examples
|
||||
|
||||
### Text line placeholders
|
||||
|
||||
```csharp
|
||||
new Skeleton("h-4 w-3/4 mb-2")
|
||||
new Skeleton("h-4 w-1/2")
|
||||
```
|
||||
|
||||
### Avatar placeholder
|
||||
|
||||
```csharp
|
||||
new Skeleton("rounded-full h-12 w-12")
|
||||
```
|
||||
|
||||
### Card skeleton loader
|
||||
|
||||
```csharp
|
||||
new Card(
|
||||
content: """
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- Render each Skeleton eagerly to a string or use slot injection -->
|
||||
</div>
|
||||
<div class="mt-4 space-y-2">
|
||||
</div>
|
||||
""")
|
||||
```
|
||||
|
||||
### Full-width block placeholder
|
||||
|
||||
```csharp
|
||||
new Skeleton("h-10 w-full")
|
||||
```
|
||||
|
||||
### HTMX skeleton swap pattern
|
||||
### A card loading state (avatar + two text lines)
|
||||
|
||||
```html
|
||||
<div class="flex items-center gap-4 p-6">
|
||||
$$AvatarSkeleton$$
|
||||
<div class="space-y-2 flex-1">
|
||||
$$Line1$$
|
||||
$$Line2$$
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```csharp
|
||||
_avatarSkeleton = new Skeleton("rounded-full h-10 w-10");
|
||||
_line1 = new Skeleton("h-4 w-1/2");
|
||||
_line2 = new Skeleton("h-4 w-3/4");
|
||||
```
|
||||
|
||||
### HTMX swap: show skeleton immediately, replace with real content
|
||||
|
||||
Render the skeleton into a slot. HTMX fires immediately on page load and swaps it with the real content:
|
||||
|
||||
```html
|
||||
<!-- Shown immediately; HTMX replaces with real content -->
|
||||
<div id="user-list"
|
||||
hx-get="/users"
|
||||
hx-trigger="load"
|
||||
@@ -81,13 +61,25 @@ new Skeleton("h-10 w-full")
|
||||
</div>
|
||||
```
|
||||
|
||||
The page renders the skeleton on initial load; the HTMX request fires immediately and replaces it once the data arrives.
|
||||
The skeleton appears instantly; the data loads in the background and replaces it.
|
||||
|
||||
### A full table loading state
|
||||
|
||||
```csharp
|
||||
// Stack five skeleton rows to simulate a loading table
|
||||
var rows = string.Concat(Enumerable.Range(0, 5).Select(_ =>
|
||||
{
|
||||
var w = new System.Buffers.ArrayBufferWriter<byte>();
|
||||
new Skeleton("h-8 w-full mb-2").Render(new HtmxRenderContext(w));
|
||||
return System.Text.Encoding.UTF8.GetString(w.WrittenSpan);
|
||||
}));
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tips and tricks
|
||||
## How it works
|
||||
|
||||
- Multiple `Skeleton` elements stacked in a `div.space-y-2` create a convincing text-block placeholder.
|
||||
Skeleton is a single `<div>` with `animate-pulse` (Tailwind's built-in pulsing animation) and `bg-muted`. You control the shape entirely through the `classes` parameter — use `h-*` and `w-*` for size, and `rounded-full` for circular shapes like avatars.
|
||||
- `rounded-full` makes a circle — useful for avatar skeletons. Combine with equal `h-*` and `w-*` values.
|
||||
- The `classes` parameter replaces the default empty string — provide complete size + spacing classes.
|
||||
- For table skeletons, render a `Table` with each cell containing a Skeleton HTML string (pre-rendered to a string via `ArrayBufferWriter<byte>`).
|
||||
|
||||
Reference in New Issue
Block a user