From 76df2c3847c7922f588483a1b37fecd393aaf1e3 Mon Sep 17 00:00:00 2001 From: ph1p Date: Mon, 19 Aug 2024 09:18:26 +0200 Subject: [PATCH 1/3] Add timeout option to client:idle --- src/content/docs/en/reference/directives-reference.mdx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/content/docs/en/reference/directives-reference.mdx b/src/content/docs/en/reference/directives-reference.mdx index 7a41013eaf714..5df93036678bc 100644 --- a/src/content/docs/en/reference/directives-reference.mdx +++ b/src/content/docs/en/reference/directives-reference.mdx @@ -133,6 +133,15 @@ Load and hydrate the component JavaScript once the page is done with its initial ```astro ``` + +### `client:idle={{timeout}}` + +Optionally, a value for `timeout` can be passed to the underlying `requestIdleCallback`. It hydrates the component if the client is not idle, but specifies the maximum time to wait. + +```astro + +``` + ### `client:visible` - **Priority:** Low From e54c8f448f5b72b188c1dfbfbf3121a186b79c85 Mon Sep 17 00:00:00 2001 From: Phil Date: Thu, 22 Aug 2024 17:56:39 +0200 Subject: [PATCH 2/3] Update src/content/docs/en/reference/directives-reference.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/reference/directives-reference.mdx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/content/docs/en/reference/directives-reference.mdx b/src/content/docs/en/reference/directives-reference.mdx index 5df93036678bc..180a6f8b26404 100644 --- a/src/content/docs/en/reference/directives-reference.mdx +++ b/src/content/docs/en/reference/directives-reference.mdx @@ -134,9 +134,13 @@ Load and hydrate the component JavaScript once the page is done with its initial ``` -### `client:idle={{timeout}}` +### `timeout` -Optionally, a value for `timeout` can be passed to the underlying `requestIdleCallback`. It hydrates the component if the client is not idle, but specifies the maximum time to wait. +

+ +The maximum value to wait, in milliseconds, before hydrating the component, even if the page is not yet done with its initial load. + +This value allows you to pass [the timeout option from the `requestIdleCallback()` specification](https://www.w3.org/TR/requestidlecallback/#the-requestidlecallback-method). This means you can delay hydration for lower-priority UI elements with more control to ensure your element is interactive within a specified time frame. ```astro From cb66e26f01d4c247436fb01bfbd1c382be5dd694 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Thu, 22 Aug 2024 19:50:09 -0300 Subject: [PATCH 3/3] tiny tiny edits --- src/content/docs/en/reference/directives-reference.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/en/reference/directives-reference.mdx b/src/content/docs/en/reference/directives-reference.mdx index 180a6f8b26404..d1d557b378371 100644 --- a/src/content/docs/en/reference/directives-reference.mdx +++ b/src/content/docs/en/reference/directives-reference.mdx @@ -138,9 +138,9 @@ Load and hydrate the component JavaScript once the page is done with its initial

-The maximum value to wait, in milliseconds, before hydrating the component, even if the page is not yet done with its initial load. +The maximum time to wait, in milliseconds, before hydrating the component, even if the page is not yet done with its initial load. -This value allows you to pass [the timeout option from the `requestIdleCallback()` specification](https://www.w3.org/TR/requestidlecallback/#the-requestidlecallback-method). This means you can delay hydration for lower-priority UI elements with more control to ensure your element is interactive within a specified time frame. +This allows you to pass a value for [the `timeout` option from the `requestIdleCallback()` specification](https://www.w3.org/TR/requestidlecallback/#the-requestidlecallback-method). This means you can delay hydration for lower-priority UI elements with more control to ensure your element is interactive within a specified time frame. ```astro