104Get started
HextaUI

Skeleton: Fast load

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

"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>
  )
}

Add this example

This adds the example as components/examples/skeleton/fast-load.tsx, together with the Skeleton component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/skeleton-fast-load.json

To add only the component, follow the Skeleton installation.

Props in this example

The Skeleton props this example sets, from the API reference.

Skeleton

PropTypeDefault
loadingWhen set, the skeleton wraps its children: true shows the placeholder, false shows the content. Leave it out for a standalone placeholder.
boolean–

Every prop is in the Skeleton API reference.

More Skeleton examples

See them all, with keyboard support and accessibility notes, on the Skeleton page.

Related components