feat: auto-import loaders and update docs

docs/2.guide/2.directory-structure/1.components.md

@@ -125,6 +125,16 @@ In real world applications, some pages may include a lot of content and a lot of
 
 In order to optimize the page, you may want to delay the hydration of some components until they're visible, or until the browser is done with more important tasks for example. Nuxt has first class support for delayed hydration components and can help you reduce your boilerplate along the way.
 
+In order to use delayed hydration, you first need to enable it in your experimental config in `nuxt.config`
+
+```ts [nuxt.config.{ts,js}]
+export default defineNuxtConfig({
+  experimental: {
+    componentLazyHydration: true
+  }
+})
+```
+
 Nuxt has reserved component prefixes that will handle this delayed hydration for you, that extend dynamic imports. By prefixing your component with `LazyVisible`, Nuxt will automatically handle your component and delay its hydration until it will be on screen.
 
 ```vue [pages/index.vue]
@@ -145,6 +155,25 @@ If you need the component to load as soon as possible, but not block the critica
 </template>
 ```
 
+### Custom hydration triggers
+
+If you would like to override the default hydration triggers when dealing with delayed hydration, like changing the timeout or the options for the intersection observer, you can do so by supplying a `loader` prop to your lazy components.
+
+```vue [pages/index.vue]
+<template>
+  <div>
+    <LazyIdleMyComponent :loader="createIdleLoader({timeout: 3000})"/>
+    <LazyVisibleMyComponent :loader="createVisibleLoader({threshold: 0.2})"/>
+  </div>
+</template>
+```
+
+::read-more{to="/docs/api/utils/create-idle-loader"}
+::
+
+::read-more{to="/docs/api/utils/create-visible-loader"}
+::
+
 ::important
 Since Nuxt uses `LazyIdle` and `LazyVisible` to handle delayed hydration, you should avoid naming your components that, as dynamic imports will break for you. Delayed hydration would still be possible by adding the prefix, for example to a component named `IdleBar`:
 `<LazyIdleIdleBar />`

docs/3.api/3.utils/create-idle-loader.md

@@ -0,0 +1,33 @@
+---
+title: 'createIdleLoader'
+description: A utility function to customize delayed hydration based on network idle time.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/hydrate.ts
+    size: xs
+---
+
+You can use this utility to customize the timeout of delayed hydration components based on network idle time.
+
+## Parameters
+
+- `options`: `{ timeout }`
+
+## Example
+
+If you would like to give a timeout of 5 seconds for the components:
+
+```vue [pages/index.vue]
+<template>
+  <div>
+    <LazyIdleMyComponent :loader="createIdleLoader({timeout: 3000})"/>
+  </div>
+<template>
+```
+::read-more{to="/docs/guide/directory-structure/components#delayed-hydration"}
+::
+
+::read-more{to="https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback"}
+This is based on the `requestIdleCallback` web API, and therefore only accepts the timeout prop, which should be a number.
+::

docs/3.api/3.utils/create-visible-loader.md

@@ -0,0 +1,33 @@
+---
+title: 'createVisibleLoader'
+description: A utility function to customize delayed hydration based on visibility properties.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/hydrate.ts
+    size: xs
+---
+
+You can use this utility to customize the conditions through which delayed hydration components would hydrate, based on their visiblity status and properties.
+
+## Parameters
+
+- `options`: `{ root, rootMargin, threshold }`
+
+## Example
+
+If you would like to change the threshold of the element:
+
+```vue [pages/index.vue]
+<template>
+  <div>
+    <LazyIdleMyComponent :loader="createVisibleLoader({threshold: 0.2})"/>
+  </div>
+<template>
+```
+::read-more{to="/docs/guide/directory-structure/components#delayed-hydration"}
+::
+
+::read-more{to="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API"}
+This is based on the `IntersectionObserver` web API, and therefore only accepts the API's properties. You can specify only part of the properties, while the rest will default to the web API's defaults.
+::

packages/nuxt/src/imports/presets.ts

@@ -42,7 +42,7 @@ const granularAppPresets: InlinePreset[] = [
     from: '#app/composables/asyncData',
   },
   {
-    imports: ['useHydration'],
+    imports: ['useHydration','createVisibleLoader', 'createIdleLoader'],
     from: '#app/composables/hydrate',
   },
   {