---
url: "https://vueda.dev/v3/reference/theming/keys/ViewLoading.md"
title: "ViewLoading"
---

# ViewLoading

Source: `client/lib/theme/vueda-tailwind/views/index.js`

> Centers the loading status within the route container.

Vue component: [ViewLoading](/v3/reference/api/vue/ViewLoading.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ViewLoading.md#theme-key-ViewLoading-root) | `flex justify-center px-6 py-12` | Centers the loading status within the route container. |
| [content](/v3/reference/theming/keys/ViewLoading.md#theme-key-ViewLoading-content) | `flex max-w-sm flex-col gap-3` | Holds the status and any caller-supplied details. |
| [status](/v3/reference/theming/keys/ViewLoading.md#theme-key-ViewLoading-status) | `flex items-center justify-center gap-3 text-muted-foreground` | Aligns the icon and loading message. |
| [crest](/v3/reference/theming/keys/ViewLoading.md#theme-key-ViewLoading-crest) | `size-5 shrink-0` | Loading icon size. |
| [slowCrest](/v3/reference/theming/keys/ViewLoading.md#theme-key-ViewLoading-slowCrest) | `size-5 shrink-0 text-warning` | Slow-load icon size and color. |
| [bodyRow](/v3/reference/theming/keys/ViewLoading.md#theme-key-ViewLoading-bodyRow) | `flex flex-col gap-1 text-center` | Optional context and request details below the status. |
| [bodyRowText](/v3/reference/theming/keys/ViewLoading.md#theme-key-ViewLoading-bodyRowText) | `text-sm` | Normal loading message. |
| [bodyRowSub](/v3/reference/theming/keys/ViewLoading.md#theme-key-ViewLoading-bodyRowSub) | `text-xs text-muted-foreground` | Optional caller-provided context. |
| [request](/v3/reference/theming/keys/ViewLoading.md#theme-key-ViewLoading-request) | `break-all font-mono text-xs text-muted-foreground` | Optional HTTP verb and path. |
| [heartbeat](/v3/reference/theming/keys/ViewLoading.md#theme-key-ViewLoading-heartbeat) |  | Extra classes for the optional request and dependency status strip. |
| [slowTitle](/v3/reference/theming/keys/ViewLoading.md#theme-key-ViewLoading-slowTitle) | `text-sm` | Message shown once the slow threshold is reached. |
| [slowBlurb](/v3/reference/theming/keys/ViewLoading.md#theme-key-ViewLoading-slowBlurb) | `text-xs text-muted-foreground` | Optional explanation of a slow load. |
| [actions](/v3/reference/theming/keys/ViewLoading.md#theme-key-ViewLoading-actions) | `flex flex-wrap justify-center gap-2` | Caller-provided actions during a slow load. |

<a id="theme-key-ViewLoading-root"></a>

## root

> Centers the loading status within the route container.

Default classes:

`flex justify-center px-6 py-12`

Source: `client/lib/theme/vueda-tailwind/views/ViewLoading.theme.js:12`

<a id="theme-key-ViewLoading-content"></a>

## content

> Holds the status and any caller-supplied details.

Default classes:

`flex max-w-sm flex-col gap-3`

Source: `client/lib/theme/vueda-tailwind/views/ViewLoading.theme.js:16`

<a id="theme-key-ViewLoading-status"></a>

## status

> Aligns the icon and loading message.

Default classes:

`flex items-center justify-center gap-3 text-muted-foreground`

Source: `client/lib/theme/vueda-tailwind/views/ViewLoading.theme.js:20`

<a id="theme-key-ViewLoading-crest"></a>

## crest

> Loading icon size.

Default classes:

`size-5 shrink-0`

Source: `client/lib/theme/vueda-tailwind/views/ViewLoading.theme.js:24`

<a id="theme-key-ViewLoading-slowCrest"></a>

## slowCrest

> Slow-load icon size and color.

Default classes:

`size-5 shrink-0 text-warning`

Source: `client/lib/theme/vueda-tailwind/views/ViewLoading.theme.js:28`

<a id="theme-key-ViewLoading-bodyRow"></a>

## bodyRow

> Optional context and request details below the status.

Default classes:

`flex flex-col gap-1 text-center`

Source: `client/lib/theme/vueda-tailwind/views/ViewLoading.theme.js:32`

<a id="theme-key-ViewLoading-bodyRowText"></a>

## bodyRowText

> Normal loading message.

Default classes:

`text-sm`

Source: `client/lib/theme/vueda-tailwind/views/ViewLoading.theme.js:36`

<a id="theme-key-ViewLoading-bodyRowSub"></a>

## bodyRowSub

> Optional caller-provided context.

Default classes:

`text-xs text-muted-foreground`

Source: `client/lib/theme/vueda-tailwind/views/ViewLoading.theme.js:40`

<a id="theme-key-ViewLoading-request"></a>

## request

> Optional HTTP verb and path.

Default classes:

`break-all font-mono text-xs text-muted-foreground`

Source: `client/lib/theme/vueda-tailwind/views/ViewLoading.theme.js:44`

<a id="theme-key-ViewLoading-heartbeat"></a>

## heartbeat

> Extra classes for the optional request and dependency status strip.

Source: `client/lib/theme/vueda-tailwind/views/ViewLoading.theme.js:48`

<a id="theme-key-ViewLoading-slowTitle"></a>

## slowTitle

> Message shown once the slow threshold is reached.

Default classes:

`text-sm`

Source: `client/lib/theme/vueda-tailwind/views/ViewLoading.theme.js:52`

<a id="theme-key-ViewLoading-slowBlurb"></a>

## slowBlurb

> Optional explanation of a slow load.

Default classes:

`text-xs text-muted-foreground`

Source: `client/lib/theme/vueda-tailwind/views/ViewLoading.theme.js:56`

<a id="theme-key-ViewLoading-actions"></a>

## actions

> Caller-provided actions during a slow load.

Default classes:

`flex flex-wrap justify-center gap-2`

Source: `client/lib/theme/vueda-tailwind/views/ViewLoading.theme.js:60`