Skip to content

Commit 3037684

Browse files
Update useIsRouting reference page (#1400)
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 485e8ba commit 3037684

File tree

1 file changed

+45
-10
lines changed

1 file changed

+45
-10
lines changed

src/routes/solid-router/reference/primitives/use-is-routing.mdx

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,56 @@ tags:
99
- pending
1010
- state
1111
- ui
12-
version: '1.0'
12+
version: "1.0"
1313
description: >-
1414
Track route transitions with useIsRouting - display loading states, pending
1515
UI, and transition feedback during navigation in SolidJS.
1616
---
1717

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

21-
```js
22-
const isRouting = useIsRouting();
20+
## Import
2321

24-
return (
25-
<div classList={{ "grey-out": isRouting() }}>
26-
<MyAwesomeContent />
27-
</div>
28-
);
22+
```ts
23+
import { useIsRouting } from "@solidjs/router";
2924
```
25+
26+
## Type
27+
28+
```ts
29+
const useIsRouting: () => () => boolean;
30+
```
31+
32+
## Parameters
33+
34+
None.
35+
36+
## Return value
37+
38+
**Type:** `() => boolean`
39+
40+
An accessor function that returns `true` during route transitions and `false` otherwise.
41+
42+
## Examples
43+
44+
### Route transition indicator
45+
46+
```tsx
47+
import { useIsRouting } from "@solidjs/router";
48+
49+
function App() {
50+
const isRouting = useIsRouting();
51+
52+
return (
53+
<>
54+
{isRouting() && <div class="loading-bar" />}
55+
<MyContent />
56+
</>
57+
);
58+
}
59+
```
60+
61+
## Related
62+
63+
- [`<Router>`](/solid-router/reference/components/router)
64+
- [`useNavigate`](/solid-router/reference/primitives/use-navigate)

0 commit comments

Comments
 (0)