# Spinner: Without flicker

> Pass `loading` and the spinner waits `delay` (150ms) before showing, so fast loads never flash it, then stays at least `minDuration` (400ms) once it's visible.

Example: https://hextaui.com/docs/spinner/examples/delayed
Component docs: https://hextaui.com/docs/spinner.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/spinner-delayed.json
```

This adds `components/examples/spinner/delayed.tsx` with the Spinner component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/spinner/delayed.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"

export function SpinnerDelayed() {
  const [loading, setLoading] = React.useState(false)

  const load = (ms: number) => {
    setLoading(true)
    setTimeout(() => setLoading(false), ms)
  }

  return (
    <div className="flex max-w-full min-w-0 flex-col items-center gap-4">
      <div className="flex size-8 items-center justify-center">
        <Spinner loading={loading} size="lg" />
      </div>
      <div className="flex flex-wrap justify-center gap-2">
        <Button variant="outline" size="sm" onClick={() => load(100)}>
          Fast load (100ms)
        </Button>
        <Button variant="outline" size="sm" onClick={() => load(250)}>
          Load (250ms)
        </Button>
        <Button variant="outline" size="sm" onClick={() => load(2000)}>
          Slow load (2s)
        </Button>
      </div>
    </div>
  )
}
```

## Props in this example

### Spinner

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"sm" \| "default" \| "lg" \| "xl" \| null` | `"default"` | null leaves sizing to the parent. |
| `loading` | `boolean` | – | Turns on delayed showing. Leave it out to always show. |

## More Spinner examples

- [Sizes](https://hextaui.com/docs/spinner/examples/sizes.md)
- [Inline](https://hextaui.com/docs/spinner/examples/inline.md)
- [In buttons](https://hextaui.com/docs/spinner/examples/button.md)