AppSplash
The full-viewport boot screen shown while an app resolves its session.
<app-splash initials="AC" text="Signing you in…" /><app-splash> covers the viewport for the one moment a portal has: after the page loads but before it knows who the user is.
On a Razor site the server usually knows the user before it renders, so this is mostly for the React portal's ApplicationNavigator. The Razor tag helper exists so a server-rendered interstitial — an OAuth callback landing page, a “redirecting…” hop — looks identical rather than being hand-rolled.
Playground
Every attribute, live — scaled into a bounded frame here since the real component is position: fixed and covers the whole viewport. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the preview above it.
Where it goes
Return it from a page that's just a hop — while a redirect or the session is still resolving — before the browser lands on its real destination.
The live example below is scaled into a frame — the real component is position: fixed and covers the whole viewport.
Show code
@* An OAuth callback / redirect page, while it finishes *@ <app-splash initials="AC" text="Signing you in…"></app-splash> <meta http-equiv="refresh" content="1;url=/dashboard" />
Preview
A brand mark, an indeterminate bar, and one line of text. The bar sweeps rather than filling: boot has no measurable percentage, and a bar that appeared to measure one would be lying.
position: fixed.Show code
@* Fallback mark *@
<app-splash initials="AC" text="Signing you in…" />
@* With the brand asset — inner content replaces the initials *@
<app-splash text="Signing you in…">
<img class="splash-logo" src="/logo.svg" alt="Acme" />
</app-splash>
variant; scale the mark with size (a preset or a px number); add a quieter second line with subtext.Show code
<app-splash initials="AC" variant="ring" text="Signing you in…" /> <app-splash initials="AC" variant="dots" text="Signing you in…" /> <app-splash initials="AC" size="lg" text="Signing you in…" subtext="This only takes a moment" />
z-index: 1040 — above the app, below a modal backdrop. So if boot fails and an error dialog is raised, the dialog is not trapped behind the splash.When to use
Use it when
- An app is resolving its session and no view can render yet.
- A server-rendered interstitial hop — an OAuth callback, a redirect page.
- A flash of the wrong screen would otherwise be visible.
Reach for something else when
- A section of an already-rendered page is loading. → app-skeleton
- A small, shapeless wait. → app-spinner
- A form is submitting. → app-button loading
- Boot failed and the user must be told. → app-alert
Every option
The whole surface of the component, one cell per value — every demo is scaled into a bounded frame since the real component is position: fixed and covers the whole viewport.
variant — all three
variant="bar"
variant="ring"
variant="dots"
size — the presets and an exact px diameter
size="sm"
size="md"
size="lg"
size="96"
mark — logo, initials, neither
(content) — overrides initials
initials="AC" — fallback mark
(neither) — indicator only
text — one line, two lines, none
text only
text + subtext
(neither) — mark + indicator only
label — the accessible name for the live region
label="Loading" (default)
label="Verifying your account"
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
| (content) | markup | — | Brand mark. When present it replaces the initials. Razor-only; the React <AppSplash> reaches the same outcome with the logo prop. |
| initials | string | — | Fallback mark when there is no logo. Two characters read best. |
| text | string | — | One line, e.g. “Signing you in…”. |
| subtext | string | — | A quieter second line under the text. |
| variant | bar | ring | dots | bar | The indeterminate boot indicator — sweeping bar, spinning ring, or bouncing dots. |
| size | sm | md | lg | number | md | Mark diameter — a preset or an exact px value. |
| label | string | Loading | Accessible name for the polite live region. |