Astro
client:idle
client:idle is the Astro directive that loads an island once the browser reports it has nothing else to do. It uses requestIdleCallback.
How it is measured
The island's HTML renders on the server. Its JavaScript waits for the idle callback, then downloads and hydrates. You can pass a timeout, in milliseconds, so it loads even if the page stays busy.
Measure by recording when the island becomes interactive. In DevTools, find the script request and note its start time relative to load. It should start after the main content has painted and after long tasks settle.
Worked example
A real-estate listing page has a mortgage calculator below the photos. It uses client:idle with a 2000 ms timeout. On a quiet laptop it hydrates at 380 ms; on a phone loading 40 thumbnails it hydrates at 2,000 ms.
A buyer who taps a field at 900 ms on the phone may find the widget not ready yet. The team adds a visible skeleton so the empty moment does not look broken.
How it differs
client:idle waits for a quiet browser. client:load starts right away. Idle protects the first seconds of the page and delays interactivity; load gives up some of that protection to be ready sooner.
Common errors
Using it for something users tap in the first second. Not setting a timeout on busy pages. Assuming idle means after scroll. Forgetting the island is still visible but dead until it hydrates. Testing only on a fast desktop.
In practice
Use it for things such as a chat bubble, a share button, or a cookie-free feedback widget that nobody touches immediately. Set a timeout. Test on a throttled mid-range phone profile.