Router integration

import { RouteProgress } from 'solid-route-progress/router'

<Router root={(props) => <><RouteProgress /><Suspense>{props.children}</Suspense></>}>

Covered by `useIsRouting()`
`<A>` clicks · `navigate()` · back/forward · action redirects · every `<Suspense>` the new route waits on

`<RouteProgress>`

Every <Progress> prop, plus:

Prop	Default	Meaning
`shallow`	`false`	skip navigations that keep the `pathname`
`filter`		`(to, from) => boolean`; `false` skips it
`crossDocument`	`true`	also hold for navigations that leave the document

<RouteProgress shallow filter={(to) => !to.startsWith('/admin')} />

Each navigation takes its own hold.

Ignoring links

<A href="/settings" data-sp-ignore>
  Settings
</A>

Works for <A>, plain anchors and Navigation API navigations alike.

Leaving the document

Navigation	Bar
external link, plain form post, `location` assignment, `reload()`	holds until the document unloads
stopped, or superseded by a newer one	fades out without reaching 100%
back from the bfcache	fades out
intercepted after all	completes on `navigatesuccess`
no response (a `204`, a server-sent download)	completes after `timeout`
started from the browser itself (reload button, address bar)	nothing
`mailto:`, `tel:`, `download`, canceled by another listener	nothing

<RouteProgress
  crossDocument={{ timeout: 5000, filter: (event) => event.navigationType !== 'reload' }}
/>

<RouteProgress crossDocument={false} />

import { createCrossDocumentProgress } from 'solid-route-progress'

createCrossDocumentProgress(controller, options)

`createRouteProgress()`

import { createProgress, Progress } from 'solid-route-progress'
import { createRouteProgress } from 'solid-route-progress/router'

const progress = createProgress()
createRouteProgress(progress, { shallow: true })

<Progress controller={progress} />