# Skeleton: Fast load

> A skeleton stays invisible for its first 150ms, then fades in. Data that arrives sooner never flashes a placeholder.

Example: https://hextaui.com/docs/skeleton/examples/fast-load
Component docs: https://hextaui.com/docs/skeleton.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/skeleton-fast-load.json
```

This adds `components/examples/skeleton/fast-load.tsx` with the Skeleton component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/skeleton/fast-load.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonFastLoad() {
  const [loading, setLoading] = React.useState(true)
  const timer = React.useRef<ReturnType<typeof setTimeout>>(undefined)

  React.useEffect(() => () => clearTimeout(timer.current), [])

  function run() {
    clearTimeout(timer.current)
    setLoading(true)
    timer.current = setTimeout(() => setLoading(false), 80)
  }

  return (
    <div className="flex flex-col items-center gap-3">
      <Skeleton loading={loading}>
        <p className="text-sm">
          Loaded in 80ms, so the skeleton never became visible.
        </p>
      </Skeleton>
      <Button size="sm" onClick={run}>
        Run fast load
      </Button>
    </div>
  )
}
```

## Props in this example

### Skeleton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `loading` | `boolean` | – | When set, the skeleton wraps its children: true shows the placeholder, false shows the content. Leave it out for a standalone placeholder. |

## More Skeleton examples

- [Shapes](https://hextaui.com/docs/skeleton/examples/shapes.md)
- [Animations](https://hextaui.com/docs/skeleton/examples/animations.md)
- [Text](https://hextaui.com/docs/skeleton/examples/text.md)
- [Wrap real content](https://hextaui.com/docs/skeleton/examples/wrap-content.md)
- [Inline](https://hextaui.com/docs/skeleton/examples/inline.md)
- [Many rows](https://hextaui.com/docs/skeleton/examples/many-rows.md)
- [Right to left](https://hextaui.com/docs/skeleton/examples/rtl.md)