ViewLoading

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

Centering wrapper that fills the viewport vertically and centers the embedded SystemMessageCard on both axes. The card chassis is fixed-width, so a flex parent is required for it to sit in the middle of an otherwise-empty page.

Vue component: ViewLoading

Slot	Default classes	Description
root	flex min-h-full items-center justify-center p-8	Centering wrapper that fills the viewport vertically and centers the embedded SystemMessageCard on both axes. The card chassis is fixed-width, so a flex parent is required for it to sit in the middle of an otherwise-empty page.
crest	w-5 h-5	20 px icon classes passed through SystemMessageCard iconProps on the normal, non-slow path. Sized to read as a glyph beside the crest label, not as the dominant figure in the card.
slowCrest	text-[18px] leading-none	Hourglass icon classes passed through SystemMessageCard iconProps once the slow-path tone activates. 18 px so the swap reads as a deliberate state change against the 20 px loading icon it replaces.
bodyRow	flex flex-col gap-1	Stacked row inside the card body that holds either the name / context pair (normal path) or the slow title / blurb pair (slow path). 4 px gap so the two lines read as a labelled pair, not as separate paragraphs.
bodyRowText	text-[14px] font-semibold leading-[1.3] text-foreground	Primary "what is loading" line on the normal path. 14 px / 600 / foreground; same recipe as banner titles on ModelActionForm.bannerTitle so loading and confirmation surfaces read consistently.
bodyRowSub	text-[12px] font-normal leading-[1.5] text-muted-foreground	One-line context beneath the name. 12 px / muted-foreground per the headline / supporting-copy hierarchy.
skeleton		Extra classes forwarded to LoadingSkeletonGhost. Empty by default; the skeleton ships its own internal sizing and consumers only override when a specific route wants a different placeholder shape.
heartbeat		Extra classes forwarded to LoadingHeartbeatStrip. Empty by default; the strip carries its own chrome and consumers only override when a specific route wants a different elapsed-time band.
slowTitle	text-[14px] font-semibold leading-[1.3] text-foreground	Slow-path title ("This is taking longer than usual") that replaces ViewLoading.bodyRowText once elapsedMs >= slowAfterMs. Same 14 px / 600 / foreground recipe so the swap stays type-stable.
slowBlurb	text-[12px] font-normal leading-[1.5] text-muted-foreground	Route-specific explanation rendered beneath the slow-path title when a slowBlurb prop is provided. 12 px / muted-foreground; same recipe as the normal-path context line so the body stays the same shape across the tone flip.

root

Centering wrapper that fills the viewport vertically and centers the embedded SystemMessageCard on both axes. The card chassis is fixed-width, so a flex parent is required for it to sit in the middle of an otherwise-empty page.

Default classes:

flex min-h-full items-center justify-center p-8

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

crest

20 px icon classes passed through SystemMessageCard iconProps on the normal, non-slow path. Sized to read as a glyph beside the crest label, not as the dominant figure in the card.

Default classes:

w-5 h-5

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

slowCrest

Hourglass icon classes passed through SystemMessageCard iconProps once the slow-path tone activates. 18 px so the swap reads as a deliberate state change against the 20 px loading icon it replaces.

Default classes:

text-[18px] leading-none

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

bodyRow

Stacked row inside the card body that holds either the name / context pair (normal path) or the slow title / blurb pair (slow path). 4 px gap so the two lines read as a labelled pair, not as separate paragraphs.

Default classes:

flex flex-col gap-1

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

bodyRowText

Primary "what is loading" line on the normal path. 14 px / 600 / foreground; same recipe as banner titles on ModelActionForm.bannerTitle so loading and confirmation surfaces read consistently.

Default classes:

text-[14px] font-semibold leading-[1.3] text-foreground

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

bodyRowSub

One-line context beneath the name. 12 px / muted-foreground per the headline / supporting-copy hierarchy.

Default classes:

text-[12px] font-normal leading-[1.5] text-muted-foreground

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

skeleton

Extra classes forwarded to LoadingSkeletonGhost. Empty by default; the skeleton ships its own internal sizing and consumers only override when a specific route wants a different placeholder shape.

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

heartbeat

Extra classes forwarded to LoadingHeartbeatStrip. Empty by default; the strip carries its own chrome and consumers only override when a specific route wants a different elapsed-time band.

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

slowTitle

Slow-path title ("This is taking longer than usual") that replaces ViewLoading.bodyRowText once elapsedMs >= slowAfterMs. Same 14 px / 600 / foreground recipe so the swap stays type-stable.

Default classes:

text-[14px] font-semibold leading-[1.3] text-foreground

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

slowBlurb

Route-specific explanation rendered beneath the slow-path title when a slowBlurb prop is provided. 12 px / muted-foreground; same recipe as the normal-path context line so the body stays the same shape across the tone flip.

Default classes:

text-[12px] font-normal leading-[1.5] text-muted-foreground

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