Page Loading

You might be looking for:

• Skeleton

  Pulse bars that stand in for fetching values.

• Shimmer

  Animated text highlight while copy is generating.

Whole-page wait with no skeleton of its own: the seam between "submit" on an auth screen and the next route committing. Icon only, centered, no copy.

Usage

import { PageLoading } from "@sophic/portal-ui";

{navigating ? <PageLoading label="Signing in" /> : null}

Render it when the app has accepted the action but the destination page has not mounted yet — e.g. right before router.replace after a successful sign-in. The route change unmounts the source page and the gate with it.

Pass contained when the gate should fill a positioned ancestor instead of the viewport (docs previews, bounded stages).

label drives aria-label and visually hidden text — make it describe what is loading ("Signing in", "Restoring session"), not just "Loading".

For session restore use SessionGate, which composes this component with its own label.

Variants

Default spin is a one-way CSS rotate on SophicWheel. mark is the unframed looping Lottie. wheel is the earlier pulse-and-shrink loop.

Props

Changelog

• 11 September 2026 — Default is a CSS spin (spin); Lottie is mark; pulse loop is wheel. Session Gate uses the new default. Full notes
• 11 September 2026 — Shared SophicMark also drives the App Nav brand (toggle + hover replay). Full notes
• 11 September 2026 — Default is the looping mark; wheel is the other variant. Full notes
• 25 August 2026 — Added. Full notes