ViewLoading

Overview

Full-page loading placeholder for route-level async resolution. Composes a SystemMessageCard(tone="loading") with a spinner crest, an optional verb-path crest label, a body row for what is loading and one-line context, a LoadingSkeletonGhost claiming layout space, and a LoadingHeartbeatStrip showing elapsed time and dependency progress. Once elapsedMs exceeds slowAfterMs the card flips to tone="warning", the spinner swaps for an hourglass, the heartbeat dot turns amber, and the slow-path body is shown. A slow-actions slot populates the card actions footer (e.g. Cancel, View queue).

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	String|Object|Array		null	A partial theme object merged with the component's default theme; accepts a class string, class array, or theme object.
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

slow-actions

Slot.

Source

client/lib/views/ViewLoading.vue