Navigation API · solid-route-progress

import { NavigationProgress } from 'solid-route-progress/navigation'

;<NavigationProgress />

It works without a router.

`<NavigationProgress>`

Every <Progress> prop, plus:

Prop	Default	Meaning
`filter`		`(event) => boolean` on the `navigate` event; `false` skips it
`timeout`	`10000`	safety net for navigations that never unload; `0` disables it

<NavigationProgress filter={(event) => event.navigationType !== 'replace'} />

When the bar completes

Navigation	Bar
intercepted by a router	holds until `navigatesuccess` / `navigateerror`
`navigateerror` with an `AbortError`	fades out without reaching 100%
`navigateerror`, anything else	completes as an `'error'`
plain `pushState`, nobody intercepting	commits before the first paint, so nothing shows
cross-document	holds until the page unloads
back from the bfcache	fades out
hash change, `download`, `data-sp-ignore`	nothing
canceled by another listener	nothing

Each navigation holds the bar on its own.

Where the API is missing

Nothing is tracked; <NavigationProgress> renders an idle bar. solid-route-progress/router's cross-document tracking needs it too.

`createNavigationProgress()`

import { createProgress, Progress } from 'solid-route-progress'
import { createNavigationProgress } from 'solid-route-progress/navigation'

const progress = createProgress()
createNavigationProgress(progress, { timeout: 5000 })

<Progress controller={progress} />

@solidjs/router loads outside the Navigation API, so use solid-route-progress/router for it.