# Router integration

```tsx
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](https://solid-route-progress.vercel.app/docs/components.md), 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                  |

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

Each navigation takes its own [hold](https://solid-route-progress.vercel.app/docs/controller.md#start).

## Ignoring links

```tsx
<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                                 |

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

```tsx
<RouteProgress crossDocument={false} />
```

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

createCrossDocumentProgress(controller, options)
```

## Actions without a redirect

An action that only revalidates runs outside `useIsRouting()`, so the bar stays hidden. Hold it for the actions you want covered:

```tsx
import { useSubmission } from '@solidjs/router'
import { createEffect, onCleanup } from 'solid-js'
import { useProgress } from 'solid-route-progress'

const saving = useSubmission(saveProfile)
const progress = useProgress()
createEffect(() => {
  if (saving.pending) onCleanup(progress.start())
})
```

The submission stays pending until the action and its revalidation have both finished.

## `createRouteProgress()`

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

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

<Progress controller={progress} />
```