Skip to content

perf: lazy load Bluesky video player - #2958

Merged
alexdln merged 1 commit into
mainfrom
perf/lazy-bluesky-video-player
Jun 27, 2026
Merged

perf: lazy load Bluesky video player#2958
alexdln merged 1 commit into
mainfrom
perf/lazy-bluesky-video-player

Conversation

@TheAlexLichter

Copy link
Copy Markdown
Contributor

🔗 Linked issue

None (but perf is always good!)

📚 Description

This PR lazy-loads the Bluesky video player so non-video Bluesky embeds no longer pull in the full HLS player chunk if they dont need it.

Optionally, a media-hint="video" preload hint for known video posts can be set, which starts loading the video player earlier while still rendering only when post.embed?.playlist is present. This is optional but recommended when we know the content.

During tests, HLS split into its own (now optional) chunk at about 152.2 KB gzip, with the Bluesky embed chunk staying small at about 2.1 KB gzip.

@vercel

vercelBot commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

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

ProjectDeploymentActionsUpdated (UTC)
npmx.devReadyReadyPreview, CommentJun 24, 2026 9:35pm
2 Skipped Deployments
ProjectDeploymentActionsUpdated (UTC)
docs.npmx.devIgnoredIgnoredJun 24, 2026 9:35pm
npmx-lunariaIgnoredIgnoredJun 24, 2026 9:35pm

Request Review

@coderabbitai

coderabbitaiBot commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 68231713-6a29-4989-8fd2-bcce76ef2190

📥 Commits

Reviewing files that changed from the base of the PR and between a93b547 and 736c5e1.

📒 Files selected for processing (2)
  • app/components/global/BlueskyPostEmbed.client.vue
  • app/pages/blog/release/crystal-chronicle.md

📝 Walkthrough

Summary by CodeRabbit

  • New Features

    • Video embeds in Bluesky posts now load more smoothly, with playback resources fetched only when needed.
    • Affected blog post embeds now display video content more reliably in the relevant sections.
  • Bug Fixes

    • Improved handling of embedded videos so they are less likely to stall or load unnecessarily when viewing posts.

Walkthrough

Bluesky post embeds now accept an optional media-hint="video" prop that lazy-loads the video player for matching embeds. Two release-note embeds were updated to pass that hint.

Changes

Bluesky video embed loading

Layer / File(s)Summary
Embed video lazy-load
app/components/global/BlueskyPostEmbed.client.vue
mediaHint is added to the embed props, VideoPlayer.vue is imported only for video hints, and the embedded video section renders LazyVideoPlayer.
Release note embed hints
app/pages/blog/release/crystal-chronicle.md
Two BlueskyPostEmbed instances add media-hint="video" in the Timeline tab and Scatter with selectable axis sections.

Possibly related PRs

  • npmx-dev/npmx.dev#2794: Also changes BlueskyPostEmbed.client.vue video handling and lazy-loading behaviour around VideoPlayer.

Suggested reviewers

  • ghostdevv
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly and concisely describes the main change: lazy-loading the Bluesky video player.
Description check✅ PassedThe description is directly related to the PR and accurately explains the lazy-loading and optional media hint changes.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch perf/lazy-bluesky-video-player

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

}>()

if (props.mediaHint === 'video') {
void import('~/components/VideoPlayer.vue')

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

didnt use preloadComponent because this only works with globally registered components.

@codecov

codecovBot commented Jun 24, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 50.00000% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing linesPatch %Lines
app/components/global/BlueskyPostEmbed.client.vue50.00%1 Missing ⚠️

📢 Thoughts on this report? Let us know!

@TheAlexLichterTheAlexLichter added perf npmx.dev app performance needs review This PR is waiting for a review from a maintainer labels Jun 25, 2026
@TheAlexLichter
TheAlexLichter requested a review from a teamJune 25, 2026 05:38

@alexdlnalexdln left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, looks great, thank you 🤍🚀

@alexdln
alexdln added this pull request to the merge queueJun 27, 2026
Merged via the queue into main with commit 4f52d3cJun 27, 2026
28 checks passed
@alexdln
alexdln deleted the perf/lazy-bluesky-video-player branch June 27, 2026 11:02
@github-actionsgithub-actionsBot mentioned this pull request Jun 27, 2026
@gameromangameroman removed the needs review This PR is waiting for a review from a maintainer label Jun 29, 2026
ayo-run pushed a commit to ayo-run/npmx.dev that referenced this pull request Aug 5, 2026
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

perfnpmx.dev app performance

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@TheAlexLichter@alexdln@gameroman