From f556ce5b94e2dc9e879a56abbcdea6be07282437 Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Wed, 4 Nov 2026 13:14:59 +0800
Subject: [PATCH] feat(pages): mark Links to the page that is loading

Link adds `data-void-pending` while a visit to its destination loads, in
React, Vue, Svelte and Solid, so a slow navigation shows feedback on the
link without comparing `useNavigation().location` with each href by hand.

A link is pending when the in-flight visit uses its method and goes to its
path, query and hash. Non-GET Links, which render a <button>, are pending
while their own request runs. `linkPendingAttributes()` in
`void/pages-client` does the matching so the adapters can't drift, and the
URL resolution it shares with `linkActiveAttributes()` moves into one
helper.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 docs/guide/pages-routing/overview.md          | 16 ++++
 docs/reference/api/pages.md                   | 82 ++++++++---------
 packages/react/src/runtime/link.tsx           | 10 ++-
 packages/react/test/unit/link.test.ts         | 48 +++++++++-
 packages/solid/src/runtime/link.tsx           |  8 +-
 packages/svelte/src/runtime/Link.svelte       |  7 ++
 packages/void/skills/void/SKILL.md            |  4 +-
 packages/void/src/pages/client.ts             |  2 +
 packages/void/src/pages/link.ts               | 71 ++++++++++++---
 packages/void/test/unit/pages-link.test.ts    | 89 ++++++++++++++++++-
 packages/vue/src/runtime/link.ts              |  6 ++
 .../react-pages/pages/link-behavior.server.ts |  3 +
 .../react-pages/pages/link-behavior.tsx       |  6 ++
 .../solid-pages/pages/link-behavior.server.ts |  3 +
 .../solid-pages/pages/link-behavior.tsx       |  6 ++
 .../pages/link-behavior.server.ts             |  3 +
 .../svelte-pages/pages/link-behavior.svelte   |  4 +
 .../vue-pages/pages/link-behavior.server.ts   |  3 +
 playground/vue-pages/pages/link-behavior.vue  |  4 +
 test/pages-client-contract.ts                 | 47 +++++++++-
 20 files changed, 364 insertions(+), 58 deletions(-)

diff --git a/docs/guide/pages-routing/overview.md b/docs/guide/pages-routing/overview.md
index aba050f38..46df69700 100644
--- a/docs/guide/pages-routing/overview.md
+++ b/docs/guide/pages-routing/overview.md
@@ -324,6 +324,22 @@ A link is active only on its own path by default. Set `activeMatch="prefix"` to
 
 Paths match the way pages are routed: letter case and trailing slashes count, while the query string and hash are ignored. Links to other origins and non-GET links are never active. An `aria-current` or `data-void-active` you pass to `Link` replaces the computed value.
 
+### Pending links
+
+While a page loads, `Link` adds `data-void-pending` to every link to it. Use it to show that a click is being handled:
+
+```css
+a[data-void-pending] {
+  opacity: 0.6;
+  /* Skip visits that finish quickly, such as to a prefetched page */
+  transition: opacity 0.15s 0.1s;
+}
+```
+
+A link is pending only while its exact destination loads. The path, query and hash must all match, so a link to `/users?page=2` isn't pending while `/users?page=3` loads. A non-GET link, which renders a `<button>`, is pending while a request with its method to its `href` runs. `router.refresh()` reloads the current page, so links to it are pending during a refresh.
+
+A `data-void-pending` you pass to `Link` replaces the computed value. For a loading indicator that covers the whole page, use [`useNavigation()`](../../reference/api/pages.md).
+
 ### Prefetching
 
 Add `prefetch` to a `Link` to load its page before the user clicks, so the visit doesn't wait for the server:
diff --git a/docs/reference/api/pages.md b/docs/reference/api/pages.md
index 1e26ac2ed..330065d1b 100644
--- a/docs/reference/api/pages.md
+++ b/docs/reference/api/pages.md
@@ -82,16 +82,16 @@ interface VoidVueOptions {
 
 Imported from `"@void/vue"`.
 
-| Export                             | Description                                                                                                                                                                                                                                                                                                                                                                                                              |
-| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `Link`                             | Vue component for SPA navigation. Renders `<a>` for GET, `<button>` for non-GET methods. Props: `href`, `method`, `data`, `prefetch`, `cacheFor`, `preserveScroll`, `preserveState`, `replace`, `reloadDocument`, `viewTransition`, `activeMatch`, `onNavigate`. Adds `aria-current="page"` and `data-void-active` to the link to the current page ([active links](../../guide/pages-routing/overview.md#active-links)). |
-| `useRouter()`                      | Returns the Void Router with current route state (`url`, `path`, `query`, `params`) and navigation methods: `visit`, `refresh`, awaitable `prefetch`, `flush`, `flushAll`.                                                                                                                                                                                                                                               |
-| `useParams()`                      | Returns dynamic route params for the page currently being rendered.                                                                                                                                                                                                                                                                                                                                                      |
-| `useNavigation()`                  | Returns pending navigation state: `{ state, location, method }`, where `state` is `"idle"`, `"loading"`, or `"submitting"` and `location` is the pending destination.                                                                                                                                                                                                                                                    |
-| `useForm(url, defaults, options?)` | Typed reactive form helper bound to a page action URL. Returns `{ data, post, put, patch, delete, pending, errors, error, hasChanges, wasSuccessful, recentlySuccessful, reset, setError, clearErrors, clearError }`.                                                                                                                                                                                                    |
-| `useIslandForm(defaults)`          | Form helper for island components. Same form state as `useForm()`, plus `submit(url, method)`. `post(url)`, `put(url)`, `patch(url)`, and `delete(url)` take the action URL and submit with `fetch()`.                                                                                                                                                                                                                   |
-| `action(url, options?)`            | Awaitable one-shot page action helper. Uses `POST` by default and accepts `{ data, method, params }`, where `method` can be `"PUT"`, `"PATCH"`, or `"DELETE"`. Returns an `ActionResult`.                                                                                                                                                                                                                                |
-| `useShared()`                      | Returns shared data injected by middleware via `c.set("shared", {...})`.                                                                                                                                                                                                                                                                                                                                                 |
+| Export                             | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Link`                             | Vue component for SPA navigation. Renders `<a>` for GET, `<button>` for non-GET methods. Props: `href`, `method`, `data`, `prefetch`, `cacheFor`, `preserveScroll`, `preserveState`, `replace`, `reloadDocument`, `viewTransition`, `activeMatch`, `onNavigate`. Adds `aria-current="page"` and `data-void-active` to the link to the current page ([active links](../../guide/pages-routing/overview.md#active-links)), and `data-void-pending` to links to a page while it loads ([pending links](../../guide/pages-routing/overview.md#pending-links)). |
+| `useRouter()`                      | Returns the Void Router with current route state (`url`, `path`, `query`, `params`) and navigation methods: `visit`, `refresh`, awaitable `prefetch`, `flush`, `flushAll`.                                                                                                                                                                                                                                                                                                                                                                                 |
+| `useParams()`                      | Returns dynamic route params for the page currently being rendered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `useNavigation()`                  | Returns pending navigation state: `{ state, location, method }`, where `state` is `"idle"`, `"loading"`, or `"submitting"` and `location` is the pending destination.                                                                                                                                                                                                                                                                                                                                                                                      |
+| `useForm(url, defaults, options?)` | Typed reactive form helper bound to a page action URL. Returns `{ data, post, put, patch, delete, pending, errors, error, hasChanges, wasSuccessful, recentlySuccessful, reset, setError, clearErrors, clearError }`.                                                                                                                                                                                                                                                                                                                                      |
+| `useIslandForm(defaults)`          | Form helper for island components. Same form state as `useForm()`, plus `submit(url, method)`. `post(url)`, `put(url)`, `patch(url)`, and `delete(url)` take the action URL and submit with `fetch()`.                                                                                                                                                                                                                                                                                                                                                     |
+| `action(url, options?)`            | Awaitable one-shot page action helper. Uses `POST` by default and accepts `{ data, method, params }`, where `method` can be `"PUT"`, `"PATCH"`, or `"DELETE"`. Returns an `ActionResult`.                                                                                                                                                                                                                                                                                                                                                                  |
+| `useShared()`                      | Returns shared data injected by middleware via `c.set("shared", {...})`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 
 Vue `Link` GET `data` is merged into the rendered `href` query string. Primitive values are serialized with `String(value)`, arrays become repeated keys, `null` and `undefined` are omitted, and nested objects throw. `prefetch` and `reloadDocument` are GET-only and throw for mutation links.
 
@@ -135,17 +135,17 @@ interface VoidReactOptions {
 
 Imported from `"@void/react"`.
 
-| Export                             | Description                                                                                                                                                                                                                                                                                                                                                                                                                |
-| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Link`                             | React component for SPA navigation. Renders `<a>` for GET, `<button>` for non-GET methods. Props: `href`, `method`, `data`, `prefetch`, `cacheFor`, `preserveScroll`, `preserveState`, `replace`, `reloadDocument`, `viewTransition`, `activeMatch`, `onNavigate`. Adds `aria-current="page"` and `data-void-active` to the link to the current page ([active links](../../guide/pages-routing/overview.md#active-links)). |
-| `useRouter()`                      | Returns the Void Router with current route state (`url`, `path`, `query`, `params`) and navigation methods: `visit`, `refresh`, awaitable `prefetch`, `flush`, `flushAll`. React navigations are scheduled as transitions.                                                                                                                                                                                                 |
-| `useParams()`                      | Returns dynamic route params for the page currently being rendered.                                                                                                                                                                                                                                                                                                                                                        |
-| `useNavigation()`                  | Returns pending navigation state: `{ state, location, method }`, where `state` is `"idle"`, `"loading"`, or `"submitting"` and `location` is the pending destination.                                                                                                                                                                                                                                                      |
-| `useForm(url, defaults, options?)` | Form helper hook. Returns `{ data, setData, post, put, patch, delete, pending, errors, error, hasChanges, wasSuccessful, recentlySuccessful, reset, setError, clearErrors, clearError }`.                                                                                                                                                                                                                                  |
-| `useIslandForm(defaults)`          | Form helper hook for island components. Same form state as `useForm()`. `post(url)`, `put(url)`, `patch(url)`, and `delete(url)` take the action URL and submit with `fetch()`.                                                                                                                                                                                                                                            |
-| `action(url, options?)`            | Awaitable one-shot page action helper. Uses `POST` by default and accepts `{ data, method, params }`, where `method` can be `"PUT"`, `"PATCH"`, or `"DELETE"`. Returns an `ActionResult`.                                                                                                                                                                                                                                  |
-| `useShared()`                      | Returns shared data injected by middleware via `c.set("shared", {...})`.                                                                                                                                                                                                                                                                                                                                                   |
-| `Deferred<T>`                      | React-only prop type for `defer()` results. It is `Promise<T>` and is consumed with React `use()`.                                                                                                                                                                                                                                                                                                                         |
+| Export                             | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `Link`                             | React component for SPA navigation. Renders `<a>` for GET, `<button>` for non-GET methods. Props: `href`, `method`, `data`, `prefetch`, `cacheFor`, `preserveScroll`, `preserveState`, `replace`, `reloadDocument`, `viewTransition`, `activeMatch`, `onNavigate`. Adds `aria-current="page"` and `data-void-active` to the link to the current page ([active links](../../guide/pages-routing/overview.md#active-links)), and `data-void-pending` to links to a page while it loads ([pending links](../../guide/pages-routing/overview.md#pending-links)). |
+| `useRouter()`                      | Returns the Void Router with current route state (`url`, `path`, `query`, `params`) and navigation methods: `visit`, `refresh`, awaitable `prefetch`, `flush`, `flushAll`. React navigations are scheduled as transitions.                                                                                                                                                                                                                                                                                                                                   |
+| `useParams()`                      | Returns dynamic route params for the page currently being rendered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `useNavigation()`                  | Returns pending navigation state: `{ state, location, method }`, where `state` is `"idle"`, `"loading"`, or `"submitting"` and `location` is the pending destination.                                                                                                                                                                                                                                                                                                                                                                                        |
+| `useForm(url, defaults, options?)` | Form helper hook. Returns `{ data, setData, post, put, patch, delete, pending, errors, error, hasChanges, wasSuccessful, recentlySuccessful, reset, setError, clearErrors, clearError }`.                                                                                                                                                                                                                                                                                                                                                                    |
+| `useIslandForm(defaults)`          | Form helper hook for island components. Same form state as `useForm()`. `post(url)`, `put(url)`, `patch(url)`, and `delete(url)` take the action URL and submit with `fetch()`.                                                                                                                                                                                                                                                                                                                                                                              |
+| `action(url, options?)`            | Awaitable one-shot page action helper. Uses `POST` by default and accepts `{ data, method, params }`, where `method` can be `"PUT"`, `"PATCH"`, or `"DELETE"`. Returns an `ActionResult`.                                                                                                                                                                                                                                                                                                                                                                    |
+| `useShared()`                      | Returns shared data injected by middleware via `c.set("shared", {...})`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `Deferred<T>`                      | React-only prop type for `defer()` results. It is `Promise<T>` and is consumed with React `use()`.                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 
 React `Link` GET `data` is merged into the rendered `href` query string. Primitive values are serialized with `String(value)`, arrays become repeated keys, `null` and `undefined` are omitted, and nested objects throw. `prefetch` and `reloadDocument` are GET-only and throw for mutation links.
 
@@ -215,16 +215,16 @@ interface VoidSvelteOptions {
 
 Imported from `"@void/svelte"`.
 
-| Export                             | Description                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Link`                             | Svelte component for SPA navigation. Renders `<a>` for GET, `<button>` for non-GET methods. Props: `href`, `method`, `data`, `prefetch`, `cacheFor`, `preserveScroll`, `preserveState`, `replace`, `reloadDocument`, `viewTransition`, `activeMatch`, `onNavigate`. Adds `aria-current="page"` and `data-void-active` to the link to the current page ([active links](../../guide/pages-routing/overview.md#active-links)). |
-| `useForm(url, defaults, options?)` | Form helper using Svelte 5 runes. Returns `{ data, post, put, patch, delete, pending, errors, error, hasChanges, wasSuccessful, recentlySuccessful, reset, setError, clearErrors, clearError }`.                                                                                                                                                                                                                            |
-| `useIslandForm(defaults)`          | Form helper for island components. Same form state as `useForm()`, plus `submit(url, method)`. `post(url)`, `put(url)`, `patch(url)`, and `delete(url)` take the action URL and submit with `fetch()`.                                                                                                                                                                                                                      |
-| `action(url, options?)`            | Awaitable one-shot page action helper. Uses `POST` by default and accepts `{ data, method, params }`, where `method` can be `"PUT"`, `"PATCH"`, or `"DELETE"`. Returns an `ActionResult`.                                                                                                                                                                                                                                   |
-| `useShared()`                      | Returns shared data injected by middleware via `c.set("shared", {...})`.                                                                                                                                                                                                                                                                                                                                                    |
-| `useRouter()`                      | Returns the Void Router with current route state (`url`, `path`, `query`, `params`) and navigation methods: `visit`, `refresh`, awaitable `prefetch`, `flush`, `flushAll`.                                                                                                                                                                                                                                                  |
-| `useParams()`                      | Returns dynamic route params for the page currently being rendered.                                                                                                                                                                                                                                                                                                                                                         |
-| `useNavigation()`                  | Returns pending navigation state: `{ state, location, method }`, where `state` is `"idle"`, `"loading"`, or `"submitting"` and `location` is the pending destination.                                                                                                                                                                                                                                                       |
+| Export                             | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Link`                             | Svelte component for SPA navigation. Renders `<a>` for GET, `<button>` for non-GET methods. Props: `href`, `method`, `data`, `prefetch`, `cacheFor`, `preserveScroll`, `preserveState`, `replace`, `reloadDocument`, `viewTransition`, `activeMatch`, `onNavigate`. Adds `aria-current="page"` and `data-void-active` to the link to the current page ([active links](../../guide/pages-routing/overview.md#active-links)), and `data-void-pending` to links to a page while it loads ([pending links](../../guide/pages-routing/overview.md#pending-links)). |
+| `useForm(url, defaults, options?)` | Form helper using Svelte 5 runes. Returns `{ data, post, put, patch, delete, pending, errors, error, hasChanges, wasSuccessful, recentlySuccessful, reset, setError, clearErrors, clearError }`.                                                                                                                                                                                                                                                                                                                                                              |
+| `useIslandForm(defaults)`          | Form helper for island components. Same form state as `useForm()`, plus `submit(url, method)`. `post(url)`, `put(url)`, `patch(url)`, and `delete(url)` take the action URL and submit with `fetch()`.                                                                                                                                                                                                                                                                                                                                                        |
+| `action(url, options?)`            | Awaitable one-shot page action helper. Uses `POST` by default and accepts `{ data, method, params }`, where `method` can be `"PUT"`, `"PATCH"`, or `"DELETE"`. Returns an `ActionResult`.                                                                                                                                                                                                                                                                                                                                                                     |
+| `useShared()`                      | Returns shared data injected by middleware via `c.set("shared", {...})`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `useRouter()`                      | Returns the Void Router with current route state (`url`, `path`, `query`, `params`) and navigation methods: `visit`, `refresh`, awaitable `prefetch`, `flush`, `flushAll`.                                                                                                                                                                                                                                                                                                                                                                                    |
+| `useParams()`                      | Returns dynamic route params for the page currently being rendered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `useNavigation()`                  | Returns pending navigation state: `{ state, location, method }`, where `state` is `"idle"`, `"loading"`, or `"submitting"` and `location` is the pending destination.                                                                                                                                                                                                                                                                                                                                                                                         |
 
 Svelte `Link` GET `data` is merged into the rendered `href` query string. Primitive values are serialized with `String(value)`, arrays become repeated keys, `null` and `undefined` are omitted, and nested objects throw. `prefetch` and `reloadDocument` are GET-only and throw for mutation links.
 
@@ -266,16 +266,16 @@ interface VoidSolidOptions {
 
 Imported from `"@void/solid"`.
 
-| Export                             | Description                                                                                                                                                                                                                                                                                                                                                                                                                |
-| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Link`                             | Solid component for SPA navigation. Renders `<a>` for GET, `<button>` for non-GET methods. Props: `href`, `method`, `data`, `prefetch`, `cacheFor`, `preserveScroll`, `preserveState`, `replace`, `reloadDocument`, `viewTransition`, `activeMatch`, `onNavigate`. Adds `aria-current="page"` and `data-void-active` to the link to the current page ([active links](../../guide/pages-routing/overview.md#active-links)). |
-| `useForm(url, defaults, options?)` | Form helper using Solid stores. Returns `{ data, setData, post, put, patch, delete, pending, errors, error, hasChanges, wasSuccessful, recentlySuccessful, reset, setError, clearErrors, clearError }`.                                                                                                                                                                                                                    |
-| `useIslandForm(defaults)`          | Form helper for island components. Same form state as `useForm()`. `post(url)`, `put(url)`, `patch(url)`, and `delete(url)` take the action URL and submit with `fetch()`.                                                                                                                                                                                                                                                 |
-| `action(url, options?)`            | Awaitable one-shot page action helper. Uses `POST` by default and accepts `{ data, method, params }`, where `method` can be `"PUT"`, `"PATCH"`, or `"DELETE"`. Returns an `ActionResult`.                                                                                                                                                                                                                                  |
-| `useShared()`                      | Returns shared data injected by middleware via `c.set("shared", {...})`.                                                                                                                                                                                                                                                                                                                                                   |
-| `useRouter()`                      | Returns the Void Router with current route state (`url`, `path`, `query`, `params`) and navigation methods: `visit`, `refresh`, awaitable `prefetch`, `flush`, `flushAll`.                                                                                                                                                                                                                                                 |
-| `useParams()`                      | Returns dynamic route params for the page currently being rendered.                                                                                                                                                                                                                                                                                                                                                        |
-| `useNavigation()`                  | Returns pending navigation state: `{ state, location, method }`, where `state` is `"idle"`, `"loading"`, or `"submitting"` and `location` is the pending destination.                                                                                                                                                                                                                                                      |
+| Export                             | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `Link`                             | Solid component for SPA navigation. Renders `<a>` for GET, `<button>` for non-GET methods. Props: `href`, `method`, `data`, `prefetch`, `cacheFor`, `preserveScroll`, `preserveState`, `replace`, `reloadDocument`, `viewTransition`, `activeMatch`, `onNavigate`. Adds `aria-current="page"` and `data-void-active` to the link to the current page ([active links](../../guide/pages-routing/overview.md#active-links)), and `data-void-pending` to links to a page while it loads ([pending links](../../guide/pages-routing/overview.md#pending-links)). |
+| `useForm(url, defaults, options?)` | Form helper using Solid stores. Returns `{ data, setData, post, put, patch, delete, pending, errors, error, hasChanges, wasSuccessful, recentlySuccessful, reset, setError, clearErrors, clearError }`.                                                                                                                                                                                                                                                                                                                                                      |
+| `useIslandForm(defaults)`          | Form helper for island components. Same form state as `useForm()`. `post(url)`, `put(url)`, `patch(url)`, and `delete(url)` take the action URL and submit with `fetch()`.                                                                                                                                                                                                                                                                                                                                                                                   |
+| `action(url, options?)`            | Awaitable one-shot page action helper. Uses `POST` by default and accepts `{ data, method, params }`, where `method` can be `"PUT"`, `"PATCH"`, or `"DELETE"`. Returns an `ActionResult`.                                                                                                                                                                                                                                                                                                                                                                    |
+| `useShared()`                      | Returns shared data injected by middleware via `c.set("shared", {...})`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `useRouter()`                      | Returns the Void Router with current route state (`url`, `path`, `query`, `params`) and navigation methods: `visit`, `refresh`, awaitable `prefetch`, `flush`, `flushAll`.                                                                                                                                                                                                                                                                                                                                                                                   |
+| `useParams()`                      | Returns dynamic route params for the page currently being rendered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `useNavigation()`                  | Returns pending navigation state: `{ state, location, method }`, where `state` is `"idle"`, `"loading"`, or `"submitting"` and `location` is the pending destination.                                                                                                                                                                                                                                                                                                                                                                                        |
 
 Solid `Link` GET `data` is merged into the rendered `href` query string. Primitive values are serialized with `String(value)`, arrays become repeated keys, `null` and `undefined` are omitted, and nested objects throw. `prefetch` and `reloadDocument` are GET-only and throw for mutation links.
 
diff --git a/packages/react/src/runtime/link.tsx b/packages/react/src/runtime/link.tsx
index bab4608d5..2fdb5a7a1 100644
--- a/packages/react/src/runtime/link.tsx
+++ b/packages/react/src/runtime/link.tsx
@@ -11,13 +11,14 @@ import type {
 import {
   handleLinkClick,
   linkActiveAttributes,
+  linkPendingAttributes,
   linkPrefetchStrategies,
   observeLinkVisible,
   prefetchLink,
   resolveLink,
   type BaseLinkProps,
 } from 'void/pages-client';
-import { RouterContext } from './context.ts';
+import { NavigationContext, RouterContext } from './context.ts';
 
 export type LinkProps = BaseLinkProps &
   Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseLinkProps> &
@@ -47,6 +48,7 @@ export function Link({
   ...rest
 }: LinkProps): JSX.Element {
   const router = useContext(RouterContext);
+  const navigation = useContext(NavigationContext);
   const elementRef = useRef<HTMLElement | null>(null);
   const hoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const link = useMemo(
@@ -64,6 +66,10 @@ export function Link({
     () => linkActiveAttributes(router, link, activeMatch),
     [activeMatch, link, router],
   );
+  const pendingAttributes = useMemo(
+    () => linkPendingAttributes(router, navigation, link),
+    [link, navigation, router],
+  );
   const hoverDelay = router?._hoverDelay ?? 75;
 
   const doPrefetch = useCallback(
@@ -237,6 +243,7 @@ export function Link({
         href={link.href}
         style={resolvedStyle}
         {...activeAttributes}
+        {...pendingAttributes}
         {...rest}
         {...eventHandlers}
       >
@@ -250,6 +257,7 @@ export function Link({
       ref={elementRef as RefObject<HTMLButtonElement>}
       type="button"
       style={resolvedStyle}
+      {...pendingAttributes}
       {...(rest as ButtonHTMLAttributes<HTMLButtonElement>)}
       {...eventHandlers}
     >
diff --git a/packages/react/test/unit/link.test.ts b/packages/react/test/unit/link.test.ts
index a3b71c65b..34b372d89 100644
--- a/packages/react/test/unit/link.test.ts
+++ b/packages/react/test/unit/link.test.ts
@@ -1,8 +1,8 @@
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { describe, expect, it } from 'vite-plus/test';
-import { createSsrRouter } from 'void/pages-client';
-import { RouterContext } from '../../src/runtime/context.ts';
+import { createSsrRouter, type NavigationMethod, type NavigationState } from 'void/pages-client';
+import { NavigationContext, RouterContext } from '../../src/runtime/context.ts';
 import { Link, type LinkProps } from '../../src/runtime/link.tsx';
 
 function renderAt(url: string | null, props: LinkProps): string {
@@ -15,6 +15,30 @@ function renderAt(url: string | null, props: LinkProps): string {
   );
 }
 
+/** Renders a Link on `/` while a visit to `destination` loads. */
+function renderVisiting(
+  destination: string,
+  props: LinkProps,
+  method: NavigationMethod = 'GET',
+): string {
+  const navigation: NavigationState = {
+    state: method === 'GET' ? 'loading' : 'submitting',
+    location: new URL(destination, 'http://localhost'),
+    method,
+  };
+  return renderToStaticMarkup(
+    createElement(
+      RouterContext.Provider,
+      { value: createSsrRouter('/') },
+      createElement(
+        NavigationContext.Provider,
+        { value: navigation },
+        createElement(Link, props, 'Users'),
+      ),
+    ),
+  );
+}
+
 describe('Link', () => {
   it('marks the link to the current page', () => {
     const current = renderAt('/users', { href: '/users' });
@@ -35,6 +59,26 @@ describe('Link', () => {
     expect(markup).toContain('data-void-active=""');
   });
 
+  it('marks a link while a visit to its destination loads', () => {
+    expect(renderVisiting('/users', { href: '/users' })).toContain('data-void-pending=""');
+    expect(renderVisiting('/users?page=2', { href: '/users' })).not.toContain('data-void-pending');
+    expect(renderAt('/', { href: '/users' })).not.toContain('data-void-pending');
+  });
+
+  it('marks a non-GET link while its own method is submitting', () => {
+    const markup = renderVisiting('/logout', { href: '/logout', method: 'POST' }, 'POST');
+    expect(markup).toMatch(/^<button[^>]* data-void-pending=""/);
+    expect(renderVisiting('/logout', { href: '/logout', method: 'POST' })).not.toContain(
+      'data-void-pending',
+    );
+  });
+
+  it('lets a passed data-void-pending override the pending state', () => {
+    // As in JSX: <Link href="/users" data-void-pending={undefined}>
+    const props = { href: '/users' as const, 'data-void-pending': undefined };
+    expect(renderVisiting('/users', props)).not.toContain('data-void-pending');
+  });
+
   it('preserves dot-segment relative hrefs when merging GET data', () => {
     const markup = renderToStaticMarkup(
       createElement(
diff --git a/packages/solid/src/runtime/link.tsx b/packages/solid/src/runtime/link.tsx
index d0624e96e..1f145afb2 100644
--- a/packages/solid/src/runtime/link.tsx
+++ b/packages/solid/src/runtime/link.tsx
@@ -3,13 +3,14 @@ import type { JSX } from 'solid-js';
 import {
   handleLinkClick,
   linkActiveAttributes,
+  linkPendingAttributes,
   linkPrefetchStrategies,
   observeLinkVisible,
   prefetchLink,
   resolveLink,
   type BaseLinkProps,
 } from 'void/pages-client';
-import { RouterContext } from './context.ts';
+import { NavigationContext, RouterContext } from './context.ts';
 
 type CommonProps = BaseLinkProps & {
   children?: JSX.Element;
@@ -64,6 +65,7 @@ export function Link(props: LinkProps): JSX.Element {
     'onTouchStart',
   ]);
   const router = useContext(RouterContext);
+  const navigation = useContext(NavigationContext);
 
   const link = createMemo(() => resolveLink(local));
   const strategies = createMemo(() =>
@@ -74,6 +76,8 @@ export function Link(props: LinkProps): JSX.Element {
   const activeAttributes = createMemo(() =>
     linkActiveAttributes(router, link(), local.activeMatch),
   );
+  // Calling navigation() tracks visits as they start and end.
+  const pendingAttributes = createMemo(() => linkPendingAttributes(router, navigation?.(), link()));
 
   function doPrefetch() {
     prefetchLink(router, link().href, local.cacheFor);
@@ -178,6 +182,7 @@ export function Link(props: LinkProps): JSX.Element {
           }}
           href={link().href}
           {...activeAttributes()}
+          {...pendingAttributes()}
           {...rest}
           style={resolvedStyle()}
           {...eventHandlers()}
@@ -190,6 +195,7 @@ export function Link(props: LinkProps): JSX.Element {
             el = r;
           }}
           type="button"
+          {...pendingAttributes()}
           {...(rest as JSX.ButtonHTMLAttributes<HTMLButtonElement>)}
           style={resolvedStyle()}
           {...eventHandlers()}
diff --git a/packages/svelte/src/runtime/Link.svelte b/packages/svelte/src/runtime/Link.svelte
index 066db80a0..87f4db303 100644
--- a/packages/svelte/src/runtime/Link.svelte
+++ b/packages/svelte/src/runtime/Link.svelte
@@ -3,10 +3,12 @@
   import {
     handleLinkClick,
     linkActiveAttributes,
+    linkPendingAttributes,
     linkPrefetchStrategies,
     observeLinkVisible,
     prefetchLink,
     resolveLink,
+    type NavigationState,
     type VoidRouter,
   } from "void/pages-client";
   import type { LinkProps } from "./link-props.ts";
@@ -36,6 +38,7 @@
   }: LinkProps = $props();
 
   const router = getContext<VoidRouter>("__void_router");
+  const navigation = getContext<{ value: NavigationState } | undefined>("__void_navigation");
 
   function doPrefetch() {
     prefetchLink(router, link.href, cacheFor);
@@ -126,6 +129,8 @@
   );
   // Reading router.url tracks the route URL, so this follows navigations.
   const activeAttributes = $derived(linkActiveAttributes(router, link, activeMatch));
+  // Reading navigation.value tracks visits as they start and end.
+  const pendingAttributes = $derived(linkPendingAttributes(router, navigation?.value, link));
   const resolvedStyle = $derived(
     style ? `touch-action: manipulation; ${style}` : "touch-action: manipulation",
   );
@@ -136,6 +141,7 @@
     bind:this={el}
     href={link.href}
     {...activeAttributes}
+    {...pendingAttributes}
     {...rest}
     style={resolvedStyle}
     onclick={onClick}
@@ -153,6 +159,7 @@
   <button
     bind:this={el}
     type="button"
+    {...pendingAttributes}
     {...rest}
     style={resolvedStyle}
     onclick={onClick}
diff --git a/packages/void/skills/void/SKILL.md b/packages/void/skills/void/SKILL.md
index 96967184a..359fe3e9f 100644
--- a/packages/void/skills/void/SKILL.md
+++ b/packages/void/skills/void/SKILL.md
@@ -86,7 +86,9 @@ the app's existing saved destination, including when the target project is new.
   `void/env`; follow `docs/guide/env-vars.md` for local and production values.
 - In Pages navigation, style the current link with `Link`'s `aria-current` and `data-void-active`
   attributes (`activeMatch="prefix"` for sections) instead of comparing `useRouter().path`; see
-  `docs/guide/pages-routing/overview.md#active-links`.
+  `docs/guide/pages-routing/overview.md#active-links`. Show a loading state on
+  the clicked link with `data-void-pending` instead of matching `useNavigation().location`
+  yourself; see `docs/guide/pages-routing/overview.md#pending-links`.
 - For platform setup, follow the pages linked from
   `docs/guide/self-hosted-platform.md`. Use `void platform list` to find the
   installation slug for maintenance. For recovery, use its documented resume
diff --git a/packages/void/src/pages/client.ts b/packages/void/src/pages/client.ts
index a0ec4534c..c4a38faf0 100644
--- a/packages/void/src/pages/client.ts
+++ b/packages/void/src/pages/client.ts
@@ -26,6 +26,7 @@ export { getValidationErrors, isModifiedEvent, mergeDataIntoHref } from './adapt
 export {
   handleLinkClick,
   linkActiveAttributes,
+  linkPendingAttributes,
   linkPrefetchStrategies,
   observeLinkVisible,
   prefetchLink,
@@ -34,6 +35,7 @@ export {
   type LinkActiveAttributes,
   type LinkActiveMatch,
   type LinkNavigateEvent,
+  type LinkPendingAttributes,
   type LinkPrefetchValue,
   type LinkPrefetchStrategy,
   type ResolvedLink,
diff --git a/packages/void/src/pages/link.ts b/packages/void/src/pages/link.ts
index 7d55394bb..7751eddf8 100644
--- a/packages/void/src/pages/link.ts
+++ b/packages/void/src/pages/link.ts
@@ -1,7 +1,7 @@
 /// <reference lib="dom" />
 import type { Href } from 'void/routes';
 import { isModifiedEvent, mergeDataIntoHref } from './adapter-helpers.ts';
-import type { NavigationMethod, VoidRouter } from './client.ts';
+import type { NavigationMethod, NavigationState, VoidRouter } from './client.ts';
 import type { PrefetchOptions } from './navigation-engine.ts';
 import type { CacheForInput, LinkPrefetchValue, LinkPrefetchStrategy } from './prefetch.ts';
 import { decodePagePath } from './url.ts';
@@ -16,6 +16,11 @@ export type LinkActiveAttributes = {
   'data-void-active'?: '';
 };
 
+/** Present only while a visit to the link's destination is loading. */
+export type LinkPendingAttributes = {
+  'data-void-pending'?: '';
+};
+
 /** Props every adapter's Link accepts. Adapters add element attributes and children. */
 export type BaseLinkProps = {
   href: Href;
@@ -132,15 +137,8 @@ export function linkActiveAttributes(
   }
 
   const current = router.url;
-  let target: URL;
-  try {
-    target = new URL(link.href, current);
-  } catch {
-    // A malformed href still renders; it just never matches.
-    return {};
-  }
-  // Protocol and host rather than `origin`, which is opaque for custom schemes such as capacitor:.
-  if (target.protocol !== current.protocol || target.host !== current.host) {
+  const target = resolveSameOrigin(link.href, current);
+  if (!target) {
     return {};
   }
 
@@ -160,6 +158,59 @@ export function linkActiveAttributes(
   return {};
 }
 
+/**
+ * Marks a link while a visit to its destination is loading: the visit uses the link's
+ * method and goes to its path, query and hash. Unlike active links, the query counts,
+ * so `?page=2` isn't pending during a visit to `?page=3`. Every link to the destination
+ * is marked, not only the one that was clicked.
+ * Spread the result before the user's attributes so theirs win.
+ */
+export function linkPendingAttributes(
+  router: VoidRouter | null | undefined,
+  navigation: NavigationState | null | undefined,
+  link: ResolvedLink,
+): LinkPendingAttributes {
+  if (
+    !router ||
+    !navigation?.location ||
+    navigation.state === 'idle' ||
+    navigation.method !== link.method
+  ) {
+    return {};
+  }
+
+  const destination = navigation.location;
+  const target = resolveSameOrigin(link.href, router.url);
+  if (
+    target &&
+    target.host === destination.host &&
+    target.protocol === destination.protocol &&
+    decodePagePath(target.pathname) === decodePagePath(destination.pathname) &&
+    target.search === destination.search &&
+    target.hash === destination.hash
+  ) {
+    return { 'data-void-pending': '' };
+  }
+
+  return {};
+}
+
+/** Resolves `href` against `base`, or returns `null` for a malformed or other-origin href. */
+function resolveSameOrigin(href: string, base: URL): URL | null {
+  let target: URL;
+  try {
+    target = new URL(href, base);
+  } catch {
+    // A malformed href still renders; it just never matches.
+    return null;
+  }
+  // Protocol and host rather than `origin`, which is opaque for custom schemes such as capacitor:.
+  if (target.protocol !== base.protocol || target.host !== base.host) {
+    return null;
+  }
+  return target;
+}
+
 export function prefetchLink(
   router: VoidRouter | null | undefined,
   href: Href,
diff --git a/packages/void/test/unit/pages-link.test.ts b/packages/void/test/unit/pages-link.test.ts
index 9e2654ed4..6da804e16 100644
--- a/packages/void/test/unit/pages-link.test.ts
+++ b/packages/void/test/unit/pages-link.test.ts
@@ -1,8 +1,15 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vite-plus/test';
-import { createRouterFacade, createSsrRouter, type VoidRouter } from '../../src/pages/client.ts';
+import {
+  createRouterFacade,
+  createSsrRouter,
+  idleNavigationState,
+  type NavigationMethod,
+  type VoidRouter,
+} from '../../src/pages/client.ts';
 import {
   handleLinkClick,
   linkActiveAttributes,
+  linkPendingAttributes,
   linkPrefetchStrategies,
   observeLinkVisible,
   prefetchLink,
@@ -214,6 +221,86 @@ describe('linkActiveAttributes', () => {
   });
 });
 
+describe('linkPendingAttributes', () => {
+  const pending = { 'data-void-pending': '' };
+  const router = { url: new URL('/admin/users?page=1', 'https://app.test') } as VoidRouter;
+
+  /** A visit in flight to `destination`, as the router reports it. */
+  function visiting(destination: string, method: NavigationMethod = 'GET') {
+    return {
+      state: method === 'GET' ? ('loading' as const) : ('submitting' as const),
+      location: new URL(destination, 'https://app.test'),
+      method,
+    };
+  }
+
+  function attributes(destination: string, props: Pick<BaseLinkProps, 'href' | 'method' | 'data'>) {
+    return linkPendingAttributes(
+      router,
+      visiting(destination, props.method?.toUpperCase() as NavigationMethod),
+      resolveLink(props),
+    );
+  }
+
+  it('marks a link while a visit to its destination loads', () => {
+    expect(attributes('/admin/users/42', { href: '/admin/users/42' })).toEqual(pending);
+    expect(attributes('/admin/users/42', { href: '/admin/users' })).toEqual({});
+    expect(attributes('/admin', { href: '/admin/users' })).toEqual({});
+  });
+
+  it('compares the query and hash', () => {
+    expect(attributes('/inbox?page=3', { href: '/inbox?page=3' })).toEqual(pending);
+    expect(attributes('/inbox?page=3', { href: '/inbox?page=2' })).toEqual({});
+    expect(attributes('/inbox?page=3', { href: '/inbox' })).toEqual({});
+    expect(attributes('/search?q=void', { href: '/search', data: { q: 'void' } })).toEqual(pending);
+    expect(attributes('/docs#install', { href: '/docs#install' })).toEqual(pending);
+    expect(attributes('/docs#install', { href: '/docs' })).toEqual({});
+  });
+
+  it('compares paths the way the router matches them', () => {
+    expect(attributes('/admin', { href: '/Admin' })).toEqual({});
+    expect(attributes('/admin', { href: '/admin/' })).toEqual({});
+    expect(attributes('/caf%C3%A9', { href: '/café' })).toEqual(pending);
+    expect(attributes('/caf%c3%a9', { href: '/caf%C3%A9' })).toEqual(pending);
+  });
+
+  it('resolves relative and absolute hrefs against the current URL', () => {
+    expect(attributes('/admin/users?page=2', { href: '?page=2' })).toEqual(pending);
+    expect(attributes('/admin/users/42', { href: 'users/42' })).toEqual(pending);
+    expect(attributes('/admin/users/42', { href: 'https://app.test/admin/users/42' })).toEqual(
+      pending,
+    );
+    expect(attributes('/admin/users/42', { href: 'https://example.com/admin/users/42' })).toEqual(
+      {},
+    );
+  });
+
+  it('marks a non-GET link only during a visit with its method', () => {
+    expect(attributes('/logout', { href: '/logout', method: 'post' })).toEqual(pending);
+    expect(attributes('/users/1', { href: '/users/1', method: 'DELETE' })).toEqual(pending);
+    expect(
+      linkPendingAttributes(
+        router,
+        visiting('/logout', 'GET'),
+        resolveLink({ href: '/logout', method: 'post' }),
+      ),
+    ).toEqual({});
+    expect(
+      linkPendingAttributes(router, visiting('/users', 'POST'), resolveLink({ href: '/users' })),
+    ).toEqual({});
+  });
+
+  it('marks nothing when no visit is loading or there is no router', () => {
+    const link = resolveLink({ href: '/admin/users/42' });
+    expect(linkPendingAttributes(router, idleNavigationState(), link)).toEqual({});
+    expect(
+      linkPendingAttributes(router, { state: 'loading', location: null, method: 'GET' }, link),
+    ).toEqual({});
+    expect(linkPendingAttributes(router, null, link)).toEqual({});
+    expect(linkPendingAttributes(null, visiting('/admin/users/42'), link)).toEqual({});
+  });
+});
+
 describe('prefetchLink', () => {
   it('prefetches other destinations with cacheFor only when given', () => {
     const router = createRouter();
diff --git a/packages/vue/src/runtime/link.ts b/packages/vue/src/runtime/link.ts
index 4c50f5a6e..85ae17ddc 100644
--- a/packages/vue/src/runtime/link.ts
+++ b/packages/vue/src/runtime/link.ts
@@ -1,6 +1,7 @@
 import {
   handleLinkClick,
   linkActiveAttributes,
+  linkPendingAttributes,
   linkPrefetchStrategies,
   observeLinkVisible,
   prefetchLink,
@@ -9,6 +10,7 @@ import {
   type LinkActiveMatch,
   type LinkNavigateEvent,
   type LinkPrefetchValue,
+  type NavigationState,
   type VoidRouter,
 } from 'void/pages-client';
 import type { Href } from 'void/routes';
@@ -85,6 +87,7 @@ const LinkComponent = defineComponent({
   props: linkPropOptions,
   setup(props, { slots, attrs }) {
     const router = inject<VoidRouter | null>('__void_router', null);
+    const navigation = inject<NavigationState | null>('__void_navigation', null);
     const elRef = ref<HTMLElement | null>(null);
     const link = computed(() => resolveLink(props));
     const strategies = computed(() =>
@@ -94,6 +97,8 @@ const LinkComponent = defineComponent({
     const activeAttributes = computed(() =>
       linkActiveAttributes(router, link.value, props.activeMatch),
     );
+    // The injected navigation state is reactive, so this follows visits as they start and end.
+    const pendingAttributes = computed(() => linkPendingAttributes(router, navigation, link.value));
 
     function doPrefetch() {
       prefetchLink(router, link.value.href, props.cacheFor);
@@ -185,6 +190,7 @@ const LinkComponent = defineComponent({
         tag,
         {
           ...activeAttributes.value,
+          ...pendingAttributes.value,
           ...attrs,
           ref: elRef,
           ...(isGet ? { href } : { type: 'button' }),
diff --git a/playground/react-pages/pages/link-behavior.server.ts b/playground/react-pages/pages/link-behavior.server.ts
index 270c38e2f..8bb855af5 100644
--- a/playground/react-pages/pages/link-behavior.server.ts
+++ b/playground/react-pages/pages/link-behavior.server.ts
@@ -40,3 +40,6 @@ export const head = defineHead<Props>((c, props) => {
     ],
   };
 });
+
+// The POST Link on this page submits here; the page then shows its data again.
+export const action = defineHandler(() => {});
diff --git a/playground/react-pages/pages/link-behavior.tsx b/playground/react-pages/pages/link-behavior.tsx
index c02f9be00..dbba35ab5 100644
--- a/playground/react-pages/pages/link-behavior.tsx
+++ b/playground/react-pages/pages/link-behavior.tsx
@@ -153,6 +153,12 @@ export default function LinkBehaviorPage({ title, absoluteUrl, protocolRelativeU
         </Link>
       </p>
 
+      <p>
+        <Link href="/link-behavior" method="post" data-testid="post-link">
+          Post to this page
+        </Link>
+      </p>
+
       <p>
         <Link href="/users" data-testid="reload-link" reloadDocument>
           Reload document
diff --git a/playground/solid-pages/pages/link-behavior.server.ts b/playground/solid-pages/pages/link-behavior.server.ts
index cd01192f7..80332db27 100644
--- a/playground/solid-pages/pages/link-behavior.server.ts
+++ b/playground/solid-pages/pages/link-behavior.server.ts
@@ -20,3 +20,6 @@ export const loader = defineHandler<Props>((c) => {
 export const head = defineHead<Props>((c, props) => {
   return { title: props.title };
 });
+
+// The POST Link on this page submits here; the page then shows its data again.
+export const action = defineHandler(() => {});
diff --git a/playground/solid-pages/pages/link-behavior.tsx b/playground/solid-pages/pages/link-behavior.tsx
index 0c98bda9e..fdb644a9b 100644
--- a/playground/solid-pages/pages/link-behavior.tsx
+++ b/playground/solid-pages/pages/link-behavior.tsx
@@ -107,6 +107,12 @@ export default function LinkBehaviorPage(props: Props) {
         </Link>
       </p>
 
+      <p>
+        <Link href="/link-behavior" method="post" data-testid="post-link">
+          Post to this page
+        </Link>
+      </p>
+
       <p>
         <Link href="/users" data-testid="reload-link" reloadDocument>
           Reload document
diff --git a/playground/svelte-pages/pages/link-behavior.server.ts b/playground/svelte-pages/pages/link-behavior.server.ts
index cd01192f7..80332db27 100644
--- a/playground/svelte-pages/pages/link-behavior.server.ts
+++ b/playground/svelte-pages/pages/link-behavior.server.ts
@@ -20,3 +20,6 @@ export const loader = defineHandler<Props>((c) => {
 export const head = defineHead<Props>((c, props) => {
   return { title: props.title };
 });
+
+// The POST Link on this page submits here; the page then shows its data again.
+export const action = defineHandler(() => {});
diff --git a/playground/svelte-pages/pages/link-behavior.svelte b/playground/svelte-pages/pages/link-behavior.svelte
index db1f94e40..8c2eb40ca 100644
--- a/playground/svelte-pages/pages/link-behavior.svelte
+++ b/playground/svelte-pages/pages/link-behavior.svelte
@@ -77,6 +77,10 @@
     <Link href="/users" data-testid="replace-link" replace>Replace with users</Link>
   </p>
 
+  <p>
+    <Link href="/link-behavior" method="post" data-testid="post-link">Post to this page</Link>
+  </p>
+
   <p>
     <Link href="/users" data-testid="reload-link" reloadDocument>Reload document</Link>
   </p>
diff --git a/playground/vue-pages/pages/link-behavior.server.ts b/playground/vue-pages/pages/link-behavior.server.ts
index cd01192f7..80332db27 100644
--- a/playground/vue-pages/pages/link-behavior.server.ts
+++ b/playground/vue-pages/pages/link-behavior.server.ts
@@ -20,3 +20,6 @@ export const loader = defineHandler<Props>((c) => {
 export const head = defineHead<Props>((c, props) => {
   return { title: props.title };
 });
+
+// The POST Link on this page submits here; the page then shows its data again.
+export const action = defineHandler(() => {});
diff --git a/playground/vue-pages/pages/link-behavior.vue b/playground/vue-pages/pages/link-behavior.vue
index bbbe28b6c..8d356a1b6 100644
--- a/playground/vue-pages/pages/link-behavior.vue
+++ b/playground/vue-pages/pages/link-behavior.vue
@@ -79,6 +79,10 @@ function preventNavigate(event: { preventDefault(): void }) {
       <Link href="/users" data-testid="replace-link" replace>Replace with users</Link>
     </p>
 
+    <p>
+      <Link href="/link-behavior" method="post" data-testid="post-link">Post to this page</Link>
+    </p>
+
     <p>
       <Link href="/users" data-testid="reload-link" reload-document>Reload document</Link>
     </p>
diff --git a/test/pages-client-contract.ts b/test/pages-client-contract.ts
index 4ce110c29..4291cdd62 100644
--- a/test/pages-client-contract.ts
+++ b/test/pages-client-contract.ts
@@ -1,4 +1,4 @@
-import type { Page } from 'playwright';
+import type { Page, Request } from 'playwright';
 import { beforeAll, describe, expect, it } from 'vite-plus/test';
 
 type TestWindow = Window & {
@@ -229,6 +229,51 @@ export function registerSharedClientTests({
     }
   });
 
+  it('Link marks links to the page that is loading', async ({ expect }) => {
+    const page = await newPage();
+    // Holds the matching requests, keeping the visit in flight until release().
+    let release = () => {};
+    const hold = (matches: (request: Request) => boolean) => {
+      const released = new Promise<void>((resolve) => {
+        release = resolve;
+      });
+      return page.route('**/*', async (route) => {
+        if (matches(route.request())) {
+          await released;
+        }
+        await route.continue();
+      });
+    };
+    const pending = (selector: string) =>
+      page.locator(selector).first().getAttribute('data-void-pending');
+    try {
+      // The home page prefetches /users as it renders; this page doesn't.
+      await page.goto(BASE + '/link-behavior');
+      await waitForHydration(page);
+
+      await hold((request) => request.method() === 'POST');
+      await page.click('[data-testid="post-link"]');
+      await page.waitForSelector('[data-testid="post-link"][data-void-pending]');
+      // A GET link to the same page isn't pending while it is submitting.
+      expect(await pending('[data-testid="absolute-current-link"]')).toBeNull();
+      release();
+      await page.waitForSelector('[data-testid="post-link"]:not([data-void-pending])');
+      await page.unrouteAll();
+
+      // Page data, prefetched or not, comes from a JSON request.
+      await hold((request) => request.headers().accept === 'application/json');
+      await page.click('nav a[href="/users"]');
+      await page.waitForSelector('nav a[href="/users"][data-void-pending]');
+      expect(await pending('nav a[href="/"]')).toBeNull();
+      release();
+      await page.waitForSelector('nav a[href="/users"][aria-current="page"]');
+      expect(await pending('nav a[href="/users"]')).toBeNull();
+    } finally {
+      release();
+      await page.context().close();
+    }
+  });
+
   it('restores scroll after browser Back from an ordinary document link', async ({ expect }) => {
     const page = await newPage();
     const errors: Array<string> = [];