Skip to content

Commit f16d29d

Browse files
Merge branch 'main' into feat/migrating-to-v2-guide
2 parents 66d925e + 3037684 commit f16d29d

2 files changed

Lines changed: 102 additions & 27 deletions

File tree

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)

src/routes/solid-router/reference/primitives/use-preload-route.mdx

Lines changed: 57 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,36 +9,76 @@ tags:
99
- optimization
1010
- prefetch
1111
- manual
12-
version: '1.0'
12+
version: "1.0"
1313
description: >-
1414
Manually preload routes with usePreloadRoute - optimize performance by
1515
prefetching route data before navigation in your SolidJS app.
1616
---
1717

18-
`usePreloadRoute` returns a function that can be used to preload a route manually.
18+
The `usePreloadRoute` function is a utility for manually preloading a route.
19+
20+
## Import
1921

2022
```ts
21-
const preload = usePreloadRoute();
23+
import { usePreloadRoute } from "@solidjs/router";
24+
```
25+
26+
## Type
2227

23-
preload(`/users/settings`, { preloadData: true });
28+
```ts
29+
const usePreloadRoute: () => (
30+
url: string | URL,
31+
options?: { preloadData?: boolean }
32+
) => void;
2433
```
2534

26-
## Usage
35+
## Parameters
36+
37+
### `url`
38+
39+
**Type:** `string | URL`
40+
**Required:** Yes
41+
42+
The route path to preload.
43+
Accepts either a `string` path or a [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object.
44+
45+
### `options`
46+
47+
- **Type:** `{ preloadData?: boolean }`
48+
- **Required:** No
2749

28-
Routes are preloaded by default within Solid Router contexts.
29-
This helper is useful when you want to preload a route in response to some other event, such as a button click or a timer.
50+
A configuration object with the following properties:
3051

31-
## Type Signature
52+
#### `preloadData`
3253

33-
### Parameters
54+
- **Type:** `boolean`
55+
- **Default:** `false`
3456

35-
| Parameter | Type | Required | Description |
36-
| --------- | -------- | -------- | ------------------------------------ |
37-
| `to` | `To` | Yes | The route path to preload |
38-
| `options` | `object` | No | Configuration options for preloading |
57+
When `true`, triggers the route's data loading in addition to preloading the route itself.
58+
59+
## Return value
60+
61+
None.
62+
63+
## Examples
64+
65+
### Basic usage
66+
67+
```tsx
68+
import { usePreloadRoute } from "@solidjs/router";
69+
70+
function SettingsButton() {
71+
const preload = usePreloadRoute();
72+
73+
return (
74+
<button onClick={() => preload("/users/settings", { preloadData: true })}>
75+
Load settings
76+
</button>
77+
);
78+
}
79+
```
3980

40-
### Options
81+
## Related
4182

42-
| Option | Type | Default | Description |
43-
| ------------- | --------- | ------- | ------------------------------------------------------------------- |
44-
| `preloadData` | `boolean` | `false` | Whether to preload the route's data in addition to the route itself |
83+
- [`<A>`](/solid-router/reference/components/a)
84+
- [`preload`](/solid-router/reference/preload-functions/preload)

0 commit comments

Comments
 (0)