NavigationProgress
A controlled navigation loading bar with delayed start and completion feedback.
Installation
bunx --bun shadcn@latest add @sui/navigation-progressInstall with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.
import { NavigationProgress } from "@workspace/ui/components/navigation-progress"Router integration
The shared UI component accepts loading state from any router. The documentation application connects it to TanStack Router:
import { useRouterState } from "@tanstack/react-router"
import { NavigationProgress } from "@workspace/ui/components/navigation-progress"
function RouterProgress() {
const active = useRouterState({ select: (state) => state.status === "pending" })
return <NavigationProgress active={active} />
}The bar waits before appearing, advances toward a capped estimate, completes when active becomes false, then hides. Quick transitions that finish before delay produce no flash. The displayed length is an estimate; the accessible progress state remains indeterminate during loading. Reduced-motion preferences disable transition animation.
API
| Prop | Default | Description |
|---|---|---|
active | Required | Whether navigation is pending. |
delay | 120 | Delay before showing the bar, in milliseconds. |
finishDelay | 180 | Time to show completion before hiding. |
position | fixed | fixed for the page top, absolute within a positioned container. |
label | Loading page | Accessible progress name. |
className | — | Placement and layout classes. |
Inspired by shadcn-admin NavigationProgress. This implementation uses the existing Base UI dependency, SUI semantic tokens, and React timers, with no react-top-loading-bar or router dependency in the UI package.