ViewLoading
Overview
Compact loading status for route-level async resolution. Shows a loading icon and label, with optional request details and dependency progress. After slowAfterMs, shows a slow-load message and the optional slow-actions slot.
Theme entry: ViewLoading
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| iconOverride | Object | null | A partial icon registry ({ [componentName]: { [iconName]: { component, props } } }) merged with inherited and default icon entries; scopes icon overrides to this component and its descendants. | |
| themeOverride | Object | null | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. | |
| name | string | undefined | What is being loaded (e.g. "Loading customer record"). | |
| verb | string | undefined | HTTP verb of the in-flight request (e.g. "GET"). | |
| path | string | undefined | Route path of the in-flight request (e.g. "/crm/customers/4218"). | |
| context | string | undefined | One-line context beneath the name (e.g. "Northwind Logistics · 14 invoices · 3 contacts"). | |
| requestId | string | undefined | Request identifier forwarded to LoadingHeartbeatStrip. | |
| dependencies | { resolved: number, total: number }|undefined | undefined | Resolved and total dependency counts forwarded to LoadingHeartbeatStrip. | |
| slowBlurb | string | undefined | Route-specific explanation shown in the slow-path blurb once the wait exceeds slowAfterMs. E.g. "The aging report aggregates 14 k invoices across 380 customers." | |
| slowAfterMs | number | () => { if (typeof window === "undefined") { return 3000; } const raw = window .getComputedStyle(document.documentElement) .getPropertyValue("--vueda-loading-slow-ms") .trim(); const parsed = parseInt(raw, 10); return Number.isFinite(parsed) ? parsed : 3000; } | Milliseconds before the slow-path warning tone activates. Defaults to the --vueda-loading-slow-ms CSS token (3000ms). Override per-route for known-slow views (reports, exports) to avoid a premature flip. |
Slots
| Name | Scoped | Description |
|---|---|---|
slow-actions | slow-actions Buttons shown once the slow threshold is exceeded (e.g. Cancel, View queue). |
Source
client/lib/views/ViewLoading.vue