fix(site): use client:idle for ejected skin tabs so hidden panels hydrate

[mihar-22]

Closes #1136

Summary

The "skin.css" / "CSS" tab on the skins docs page doesn't reveal its code snippet when clicked. Non-initial TabsPanel islands start with hidden, which prevents client:visible (Intersection Observer) from ever triggering hydration — so the MutationObserver that toggles panel visibility never gets set up.

Changes

• Switch all client:visible to client:idle in EjectedSkin.astro so hidden panels hydrate after page idle

This follows the existing guidance in the Tabs.tsx component comment (lines 11-14).

Testing

1. pnpm build:site — builds clean
2. Manual: visit /docs/framework/react/concepts/skins, click "skin.css" tab — code snippet should now appear

---

Note

Low Risk
Low risk doc-site change that only alters Astro island hydration timing for tabs; main risk is minor performance/behavior differences from earlier hydration.

Overview
Fixes the ejected skin docs tabs so non-initial panels (e.g. skin.css/CSS) reliably hydrate and reveal their code when selected.

This switches the tabs islands in EjectedSkin.astro from client:visible to client:idle, avoiding the case where initially hidden panels never become “visible” to trigger hydration.

^{Written by Cursor Bugbot for commit 0a691cc. This will update automatically on new commits. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Mar 26, 2026 6:04am

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	0a691cc
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69c4cc5fec6fd90008c21e14
😎 Deploy Preview	https://deploy-preview-1137--vjs10-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

📦 Bundle Size Report

🎨 @videojs/html — no changes

Presets (7)

Entry	Size
/video (default)	23.63 kB
/video (default + hls)	154.09 kB
/video (minimal)	23.48 kB
/video (minimal + hls)	154.01 kB
/audio (default)	21.82 kB
/audio (minimal)	21.78 kB
/background	6.75 kB

Media (6)

Entry	Size
/media/background-video	1.03 kB
/media/container	1.59 kB
/media/dash-video	236.18 kB
/media/hls-video	132.05 kB
/media/mux-video	154.80 kB
/media/simple-hls-video	12.58 kB

Players (3)

Entry	Size
/video/player	6.47 kB
/audio/player	6.46 kB
/background/player	6.46 kB

Skins (16)

Entry	Type	Size
/video/minimal-skin.css	css	3.25 kB
/video/skin.css	css	3.31 kB
/video/minimal-skin	js	22.69 kB
/video/minimal-skin.tailwind	js	23.10 kB
/video/skin	js	22.85 kB
/video/skin.tailwind	js	23.10 kB
/audio/minimal-skin.css	css	2.37 kB
/audio/skin.css	css	2.37 kB
/audio/minimal-skin	js	21.01 kB
/audio/minimal-skin.tailwind	js	21.31 kB
/audio/skin	js	21.03 kB
/audio/skin.tailwind	js	21.26 kB
/background/skin.css	css	117 B
/background/skin	js	1.13 kB
/base.css	css	157 B
/shared.css	css	86 B

UI Components (21)

Entry	Size
/ui/alert-dialog	2.17 kB
/ui/alert-dialog-close	1.68 kB
/ui/alert-dialog-description	1.59 kB
/ui/alert-dialog-title	1.60 kB
/ui/buffering-indicator	1.91 kB
/ui/captions-button	1.89 kB
/ui/controls	1.73 kB
/ui/fullscreen-button	1.91 kB
/ui/mute-button	1.88 kB
/ui/pip-button	1.91 kB
/ui/play-button	1.88 kB
/ui/playback-rate-button	1.90 kB
/ui/popover	2.61 kB
/ui/poster	1.78 kB
/ui/seek-button	1.89 kB
/ui/slider	2.12 kB
/ui/thumbnail	1.98 kB
/ui/time	1.72 kB
/ui/time-slider	2.16 kB
/ui/tooltip	2.45 kB
/ui/volume-slider	2.26 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes

Presets (7)

Entry	Size
/video (default)	19.23 kB
/video (default + hls)	150.19 kB
/video (minimal)	19.26 kB
/video (minimal + hls)	150.01 kB
/audio (default)	16.04 kB
/audio (minimal)	16.11 kB
/background	3.13 kB

Media (5)

Entry	Size
/media/background-video	476 B
/media/dash-video	236.27 kB
/media/hls-video	131.92 kB
/media/mux-video	154.66 kB
/media/simple-hls-video	12.51 kB

Skins (14)

Entry	Type	Size
/video/minimal-skin.css	css	3.25 kB
/video/skin.css	css	3.31 kB
/video/minimal-skin	js	19.18 kB
/video/minimal-skin.tailwind	js	22.41 kB
/video/skin	js	19.16 kB
/video/skin.tailwind	js	22.43 kB
/audio/minimal-skin.css	css	2.37 kB
/audio/skin.css	css	2.37 kB
/audio/minimal-skin	js	16.00 kB
/audio/minimal-skin.tailwind	js	18.43 kB
/audio/skin	js	15.98 kB
/audio/skin.tailwind	js	18.38 kB
/background/skin.css	css	90 B
/background/skin	js	272 B

UI Components (18)

Entry	Size
/ui/alert-dialog	2.75 kB
/ui/buffering-indicator	2.29 kB
/ui/captions-button	2.29 kB
/ui/controls	2.29 kB
/ui/fullscreen-button	2.34 kB
/ui/mute-button	2.32 kB
/ui/pip-button	2.31 kB
/ui/play-button	2.34 kB
/ui/playback-rate-button	2.29 kB
/ui/popover	3.46 kB
/ui/poster	2.12 kB
/ui/seek-button	2.31 kB
/ui/slider	3.16 kB
/ui/thumbnail	2.54 kB
/ui/time	1.97 kB
/ui/time-slider	2.79 kB
/ui/tooltip	2.79 kB
/ui/volume-slider	2.64 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes

Entries (7)

Entry	Size
.	4.97 kB
/dom	8.69 kB
/dom/media/custom-media-element	1.81 kB
/dom/media/dash	235.71 kB
/dom/media/hls	131.47 kB
/dom/media/mux	154.11 kB
/dom/media/simple-hls	11.96 kB

🏷️ @videojs/element — no changes

Entries (2)

Entry	Size
.	999 B
/context	943 B

📦 @videojs/store — no changes

Entries (3)

Entry	Size
.	1.32 kB
/html	700 B
/react	360 B

🔧 @videojs/utils — no changes

Entries (10)

Entry	Size
/array	104 B
/dom	1.25 kB
/events	227 B
/function	261 B
/object	119 B
/predicate	265 B
/string	148 B
/style	190 B
/time	478 B
/number	158 B

📦 @videojs/spf — no changes

Entries (3)

Entry	Size
.	40 B
/dom	10.13 kB
/playback-engine	10.01 kB

---

ℹ️ How to interpret

All sizes are standalone totals (minified + brotli).

Icon	Meaning
✅	No change
🔺	Increased ≤ 10%
🔴	Increased > 10%
🔽	Decreased
🆕	New (no baseline)

Run pnpm size locally to check current sizes.

[decepulis]

Classic. I've made this mistake before.