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 `
++ + Post to this page + +
+
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
+ + Post to this page + +
+
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
+ Post to this page +
+Reload document
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+ Post to this page +
+Reload document
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