# Tree: Lazy loading

> Fetch children in `onExpandedChange` on `<TreeItem />`. Render a disabled loading row until they arrive, so the branch keeps its chevron.

Example: https://hextaui.com/docs/tree/examples/lazy
Component docs: https://hextaui.com/docs/tree.md

## Add this example

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

This adds `components/examples/tree/lazy.tsx` with the Tree component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/tree/lazy.tsx"
"use client"

import * as React from "react"
import { IconFile, IconFolder, IconFolderOpen } from "@tabler/icons-react"

import { Spinner } from "@/components/ui/spinner"
import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

function listFiles(folder: string) {
  return new Promise<string[]>((resolve) =>
    setTimeout(
      () => resolve([`${folder}-1.log`, `${folder}-2.log`, `${folder}-3.log`]),
      900
    )
  )
}

function RemoteFolder({ name }: { name: string }) {
  const [files, setFiles] = React.useState<string[] | null>(null)
  const loading = React.useRef(false)

  return (
    <TreeItem
      value={name}
      onExpandedChange={(expanded) => {
        if (expanded && files === null && !loading.current) {
          loading.current = true
          listFiles(name).then(setFiles)
        }
      }}
    >
      <TreeItemLabel icon={<IconFolder />} expandedIcon={<IconFolderOpen />}>
        {name}
      </TreeItemLabel>
      <TreeGroup aria-busy={files === null}>
        {files === null ? (
          <TreeItem value={`${name}/loading`} disabled>
            <TreeItemLabel icon={<Spinner size="sm" label="Loading files" />}>
              Loading…
            </TreeItemLabel>
          </TreeItem>
        ) : (
          files.map((file) => (
            <TreeItem key={file} value={`${name}/${file}`}>
              <TreeItemLabel icon={<IconFile />}>{file}</TreeItemLabel>
            </TreeItem>
          ))
        )}
      </TreeGroup>
    </TreeItem>
  )
}

export function TreeLazy() {
  return (
    <Tree aria-label="Server logs" className="w-full max-w-xs">
      <RemoteFolder name="api" />
      <RemoteFolder name="worker" />
      <RemoteFolder name="cron" />
    </Tree>
  )
}
```

## Props in this example

### TreeItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | – | Required. Unique within the tree. |
| `disabled` | `boolean` | `false` |  |
| `onExpandedChange` | `(expanded: boolean) => void` | – | Called when this item opens or closes. |

### TreeItemLabel

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` | `ReactNode` | – | Shown before the label. |
| `expandedIcon` | `ReactNode` | – | Crossfades in for icon while the branch is open. |

## More Tree examples

- [Indent guides](https://hextaui.com/docs/tree/examples/lines.md)
- [Connectors](https://hextaui.com/docs/tree/examples/connectors.md)
- [Checkboxes](https://hextaui.com/docs/tree/examples/checkboxes.md)
- [Navigation](https://hextaui.com/docs/tree/examples/navigation.md)
- [Multiple selection](https://hextaui.com/docs/tree/examples/multiple.md)
- [Controlled](https://hextaui.com/docs/tree/examples/controlled.md)
- [Small](https://hextaui.com/docs/tree/examples/small.md)
- [Disabled](https://hextaui.com/docs/tree/examples/disabled.md)
- [Long names](https://hextaui.com/docs/tree/examples/long-names.md)
- [Right to left](https://hextaui.com/docs/tree/examples/rtl.md)