fix(icons): avoid hidden spinner animations

[sampotts]

Summary

• Replace SMIL spinner animations with an inline CSS animation that defaults on for SVG reuse.
• Disable the spinner animation from the skins only while buffering or preview spinners are hidden.
• Sharpen spinner diagonals by switching rotated rects to rounded stroked line segments.

Impact

Hidden spinner SVGs no longer keep browser frame/update ticks alive, while standalone spinner SVGs still animate by default.

Closes #1325

Checks

• pnpm -F @videojs/icons build
• pnpm -F @videojs/skins build
• pnpm typecheck
• pnpm exec biome check packages/skins/src/default/css/components/buffering.css packages/skins/src/default/css/components/preview.css packages/skins/src/default/tailwind/components/buffering.ts packages/skins/src/default/tailwind/components/preview.ts packages/skins/src/minimal/css/components/buffering.css packages/skins/src/minimal/css/components/preview.css packages/skins/src/minimal/tailwind/components/buffering.ts packages/skins/src/minimal/tailwind/components/preview.ts
• pnpm check:workspace
• git diff --check

---

Note

Medium Risk
Updates spinner rendering and animation control in SVG/CSS; risk is mainly UI/UX regressions and potential browser-compat issues around :has()/custom-property-driven animations.

Overview
Replaces the spinner icons’ SMIL <animate> blocks with an inline CSS keyframe animation applied to stroked <line> segments (sharper diagonals) that animates by default via --media-spinner-animation.

Updates default/minimal buffering and preview styles (CSS and Tailwind) to set --media-spinner-animation:none whenever the spinner is hidden, preventing offscreen/hidden spinners from keeping animation ticks alive.

Also adds .pnpm-store/ to .gitignore.

^{Reviewed by Cursor Bugbot for commit 0f54ae9. Bugbot is set up for automated code reviews on this repo. 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	Apr 28, 2026 6:15am

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	0f54ae9
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69f0509158c1ad0008658f37
😎 Deploy Preview	https://deploy-preview-1476--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)	28.84 kB
/video (default + hls)	162.18 kB
/video (minimal)	26.28 kB
/video (minimal + hls)	159.71 kB
/audio (default)	26.66 kB
/audio (minimal)	24.25 kB
/background	4.16 kB

Media (8)

Entry	Size
/media/background-video	1.04 kB
/media/container	1.72 kB
/media/dash-video	236.58 kB
/media/hls-video	134.69 kB
/media/mux-audio	160.91 kB
/media/mux-video	160.85 kB
/media/native-hls-video	4.62 kB
/media/simple-hls-video	15.89 kB

Players (3)

Entry	Size
/video/player	7.00 kB
/audio/player	5.12 kB
/background/player	3.86 kB

Skins (29)

Entry	Type	Size
/video/minimal-skin.css	css	3.53 kB
/video/skin.css	css	3.56 kB
/video/minimal-skin	js	26.30 kB
/video/minimal-skin.tailwind	js	26.51 kB
/video/skin	js	28.80 kB
/video/skin.tailwind	js	28.90 kB
/audio/minimal-skin.css	css	2.55 kB
/audio/skin.css	css	2.52 kB
/audio/minimal-skin	js	24.22 kB
/audio/minimal-skin.tailwind	js	24.40 kB
/audio/skin	js	26.67 kB
/audio/skin.tailwind	js	26.80 kB
/background/skin.css	css	117 B
/background/skin	js	1.15 kB
/live-video/minimal-skin.css	css	3.53 kB
/live-video/skin.css	css	3.56 kB
/live-video/minimal-skin	js	26.12 kB
/live-video/minimal-skin.tailwind	js	26.16 kB
/live-video/skin	js	28.51 kB
/live-video/skin.tailwind	js	28.59 kB
/live-audio/minimal-skin.css	css	2.55 kB
/live-audio/skin.css	css	2.52 kB
/live-audio/minimal-skin	js	24.06 kB
/live-audio/minimal-skin.tailwind	js	24.00 kB
/live-audio/skin	js	26.40 kB
/live-audio/skin.tailwind	js	26.46 kB
/base.css	css	157 B
/shared.css	css	88 B
/skin-element	js	1.36 kB

UI Components (25)

Entry	Size
/ui/alert-dialog	989 B
/ui/alert-dialog-close	465 B
/ui/alert-dialog-description	451 B
/ui/alert-dialog-title	369 B
/ui/buffering-indicator	2.49 kB
/ui/captions-button	2.59 kB
/ui/cast-button	2.62 kB
/ui/compounds	4.15 kB
/ui/controls	2.03 kB
/ui/error-dialog	3.10 kB
/ui/fullscreen-button	2.58 kB
/ui/hotkey	1.91 kB
/ui/mute-button	2.58 kB
/ui/pip-button	2.55 kB
/ui/play-button	2.56 kB
/ui/playback-rate-button	2.67 kB
/ui/popover	1.82 kB
/ui/poster	1.88 kB
/ui/seek-button	2.59 kB
/ui/slider	1.51 kB
/ui/thumbnail	2.96 kB
/ui/time	2.52 kB
/ui/time-slider	3.92 kB
/ui/tooltip	2.03 kB
/ui/volume-slider	2.66 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes

Presets (7)

Entry	Size
/video (default)	23.53 kB
/video (default + hls)	155.68 kB
/video (minimal)	21.14 kB
/video (minimal + hls)	153.27 kB
/audio (default)	19.10 kB
/audio (minimal)	17.62 kB
/background	756 B

Media (7)

Entry	Size
/media/background-video	575 B
/media/dash-video	235.21 kB
/media/hls-video	133.34 kB
/media/mux-audio	159.31 kB
/media/mux-video	159.49 kB
/media/native-hls-video	3.13 kB
/media/simple-hls-video	14.44 kB

Skins (26)

Entry	Type	Size
/video/minimal-skin.css	css	3.46 kB
/video/skin.css	css	3.48 kB
/video/minimal-skin	js	21.05 kB
/video/minimal-skin.tailwind	js	24.58 kB
/video/skin	js	23.46 kB
/video/skin.tailwind	js	24.72 kB
/audio/minimal-skin.css	css	2.45 kB
/audio/skin.css	css	2.41 kB
/audio/minimal-skin	js	17.57 kB
/audio/minimal-skin.tailwind	js	20.05 kB
/audio/skin	js	19.03 kB
/audio/skin.tailwind	js	20.07 kB
/background/skin.css	css	90 B
/background/skin	js	272 B
/live-video/minimal-skin.css	css	3.46 kB
/live-video/skin.css	css	3.48 kB
/live-video/minimal-skin	js	17.79 kB
/live-video/minimal-skin.tailwind	js	21.19 kB
/live-video/skin	js	20.18 kB
/live-video/skin.tailwind	js	21.39 kB
/live-audio/minimal-skin.css	css	2.45 kB
/live-audio/skin.css	css	2.41 kB
/live-audio/minimal-skin	js	15.79 kB
/live-audio/minimal-skin.tailwind	js	18.04 kB
/live-audio/skin	js	17.26 kB
/live-audio/skin.tailwind	js	18.18 kB

UI Components (20)

Entry	Size
/ui/alert-dialog	1.11 kB
/ui/buffering-indicator	1.85 kB
/ui/captions-button	2.03 kB
/ui/cast-button	2.04 kB
/ui/controls	1.89 kB
/ui/error-dialog	2.31 kB
/ui/fullscreen-button	2.03 kB
/ui/mute-button	2.05 kB
/ui/pip-button	2.03 kB
/ui/play-button	2.00 kB
/ui/playback-rate-button	2.02 kB
/ui/popover	1.87 kB
/ui/poster	1.74 kB
/ui/seek-button	2.10 kB
/ui/slider	3.33 kB
/ui/thumbnail	2.08 kB
/ui/time	2.54 kB
/ui/time-slider	3.00 kB
/ui/tooltip	2.17 kB
/ui/volume-slider	2.39 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes

Entries (9)

Entry	Size
.	4.96 kB
/dom	11.93 kB
/dom/media/custom-media-element	1.90 kB
/dom/media/dash	234.36 kB
/dom/media/google-cast	4.07 kB
/dom/media/hls	132.72 kB
/dom/media/mux	158.81 kB
/dom/media/native-hls	2.52 kB
/dom/media/simple-hls	13.83 kB

🏷️ @videojs/element — no changes

Entries (2)

Entry	Size
.	996 B
/context	943 B

📦 @videojs/store — no changes

Entries (3)

Entry	Size
.	1.39 kB
/html	695 B
/react	360 B

🔧 @videojs/utils — no changes

Entries (10)

Entry	Size
/array	104 B
/dom	1.92 kB
/events	319 B
/function	327 B
/object	275 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	13.33 kB
/playback-engine	13.24 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.