Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 45 additions & 10 deletions src/routes/solid-router/reference/primitives/use-is-routing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,56 @@ tags:
- pending
- state
- ui
version: '1.0'
version: "1.0"
description: >-
Track route transitions with useIsRouting - display loading states, pending
UI, and transition feedback during navigation in SolidJS.
---

Retrieves a signal that indicates whether the route is currently in a transition.
This is useful for showing a stale or pending state when the route resolution is suspended state during concurrent rendering.
The `useIsRouting` function is a utility for detecting when the router is processing a route transition.

```js
const isRouting = useIsRouting();
## Import

return (
<div classList={{ "grey-out": isRouting() }}>
<MyAwesomeContent />
</div>
);
```ts
import { useIsRouting } from "@solidjs/router";
```

## Type

```ts
const useIsRouting: () => () => boolean;
```

## Parameters

None.

## Return value

**Type:** `() => boolean`

An accessor function that returns `true` during route transitions and `false` otherwise.

## Examples

### Route transition indicator

```tsx
import { useIsRouting } from "@solidjs/router";

function App() {
const isRouting = useIsRouting();

return (
<>
{isRouting() && <div class="loading-bar" />}
<MyContent />
</>
);
}
```

## Related

- [`<Router>`](/solid-router/reference/components/router)
- [`useNavigate`](/solid-router/reference/primitives/use-navigate)