# Aspect ratio: Slow load

> The box holds its shape and shimmers until the image arrives, then the image fades in, so nothing below it moves. Press Reload to watch it again.

Example: https://hextaui.com/docs/aspect-ratio/examples/slow-load
Component docs: https://hextaui.com/docs/aspect-ratio.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/aspect-ratio-slow-load.json
```

This adds `components/examples/aspect-ratio/slow-load.tsx` with the Aspect ratio component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/aspect-ratio/slow-load.tsx"
"use client"

import * as React from "react"

import { AspectRatio } from "@/components/ui/aspect-ratio"
import { Button } from "@/components/ui/button"

export function AspectRatioSlowLoad() {
  const [src, setSrc] = React.useState<string | undefined>(undefined)
  const [attempt, setAttempt] = React.useState(0)

  React.useEffect(() => {
    const timer = setTimeout(
      () => setSrc(`/preview/landscape.svg?v=${attempt}`),
      1500
    )
    return () => clearTimeout(timer)
  }, [attempt])

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <AspectRatio ratio={16 / 9} className="rounded-xl">
        <img src={src} alt="Sunset over mountains" />
      </AspectRatio>
      <Button
        variant="outline"
        size="sm"
        className="self-start"
        onClick={() => {
          setSrc(undefined)
          setAttempt(attempt + 1)
        }}
      >
        Reload
      </Button>
    </div>
  )
}
```

## Props in this example

### AspectRatio

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `ratio` | `` number \| `${number}/${number}` \| `${number}:${number}` `` | `1` |  |

## More Aspect ratio examples

- [Ratios](https://hextaui.com/docs/aspect-ratio/examples/ratios.md)
- [Broken image](https://hextaui.com/docs/aspect-ratio/examples/broken-image.md)
- [Overlay](https://hextaui.com/docs/aspect-ratio/examples/overlay.md)
- [Without placeholder](https://hextaui.com/docs/aspect-ratio/examples/without-placeholder.md)
- [Responsive](https://hextaui.com/docs/aspect-ratio/examples/responsive.md)
- [Inside a centered flex column](https://hextaui.com/docs/aspect-ratio/examples/flex-column.md)
- [Text content](https://hextaui.com/docs/aspect-ratio/examples/text-content.md)
- [As a figure](https://hextaui.com/docs/aspect-ratio/examples/figure.md)
- [Invalid ratio](https://hextaui.com/docs/aspect-ratio/examples/invalid-ratio.md)
- [Right to left](https://hextaui.com/docs/aspect-ratio/examples/rtl.md)