perf: cut share page client JS by 45% (922KB → 508KB gz)

[richiemcilroy]

Performance pass on the share page (/s/[videoId]). No functional or visual changes intended — every change is client-bundle surgery or render scheduling; SSR paths, APIs and the database are untouched.

Results

Measured on a production build (next start), 7-run medians against a real 4K webMP4 recording, anonymous viewer:

Metric	Before	After
JS transferred	922 KB gz (29 scripts)	508 KB gz (25 scripts)
JS decoded	3.19 MB	1.69 MB
Total blocking time (4x CPU throttle)	253 ms	29 ms
Video ready to play	~3.2 s	~2.8 s
JS heap after load	22 MB	12 MB
TTFB / FCP	31 ms / 72 ms	unchanged

What changed

Effect runtime out of the entry chunk (−246 KB gz). It leaked in through three doors:

• useUploadProgress (RPC client) statically imported by all three players — split into pure upload-progress.ts predicates plus a headless UploadProgressTracker that only mounts while a video actually has a live upload. Initial "fetching" state and enable/disable flips mirror the old inline hook exactly.
• ShareHeader's duplicate/delete mutations — extracted into DuplicateCapMenuItem / DeleteCapDialog, loaded when the owner menu is used. Duplicate reads pending state via useIsMutating, which also fixes a pre-existing edge where reopening the menu mid-flight could double-fire.
• actions/videos/translation-languages.ts re-exported a value through the @cap/web-domain barrel into client code — now a deep import of the dependency-free Language.ts. Toolbar/Comments switch to type-only imports with casts for the constraint-free branded ids.

moment gone (−75 KB gz). The header's single .fromNow() call now uses a local util that replicates moment's humanize algorithm exactly (calendar-aware month diffing included). A new unit test pins parity using moment itself as the oracle across every threshold boundary and a four-year sweep.

Rive out of initial load (~−50 KB gz). UpgradeModal is latch-mounted behind dynamic() at all three sites. The dashboard context objects moved to DashboardContext.ts (with Contexts.tsx re-exporting) so reading useDashboardContext outside the dashboard no longer drags InviteDialog/UpgradeModal along.

More lazy seams, all following the existing ShareLinkDialog latch-and-prewarm pattern: Sharing/Settings/Password dialogs, sidebar Summary/Transcript/Settings tabs (hover on a tab prewarms its chunk), CommentMiniPlayer (keeps media-chrome out of the entry chunk), AuthOverlay (next-auth), and SummaryChapters (react-markdown — only fetched when AI data exists).

Render scheduling. Share.tsx memoizes effectiveDate and the data spreads handed to ShareVideo/Sidebar, so the 2-second status poll while a video processes no longer re-renders both subtrees with fresh object identities. The playback store's 60 fps rAF loop now only runs while frame-rate subscribers exist (classic view has none; timeline view is unchanged).

Verification

• tsc --noEmit clean; full vitest suite: 1,459 passed (only failure is the pre-existing slack-manifest color drift on main).
• New from-now.test.ts parity suite passes.
• Browser-automation pass on the production build: video plays, captions render, relative date correct, lazy Transcript/Summary tabs load with content, Timeline view mounts and returns, share dialog opens, no page errors.
• Post-change lint scan confirms no new findings introduced; no-moment resolved.

Notes for reviewers

• The one path verified by reasoning rather than observation is a share page whose video is still uploading (needs a live desktopSegments upload, which the local rig couldn't produce). The tracker preserves the old hook's state machine — including the "fetching" initial state that gates playback deferral — but it's worth a staging check: record a video and open its share page mid-upload.
• HLS pages verified to SSR and mount the player; actual segment streaming couldn't complete locally for environment reasons (media not materialized locally). The hls.js load path itself is untouched.

Greptile Summary

This PR substantially reduces the share page's initial client bundle without intended functional changes.

• Splits Effect runtime, Moment, Rive, authentication, media-player, dialog, and non-default-tab dependencies from the initial share-page bundle.
• Preserves upload-progress behavior through dynamically mounted trackers and dependency-free state helpers.
• Memoizes frequently propagated share data and gates playback frame scheduling on active subscribers.
• Adds Moment-parity coverage for the local relative-time formatter.

Confidence Score: 5/5

The PR appears safe to merge, with no concrete changed-code regression identified.

The upload-progress state bridge preserves the prior defer and completion transitions, subscriber-gated playback scheduling has correct stop and restart guards, and the lazy UI conditions retain the prior rendered states.

Important Files Changed

Filename	Overview
apps/web/app/s/[videoId]/Share.tsx	Adds stable derived data objects and lazily renders summary content only under the component's existing meaningful-data conditions.
apps/web/app/s/[videoId]/_components/ShareHeader.tsx	Moves interaction-only dialogs and mutations behind dynamic latch-mounted components and replaces Moment with a local formatter.
apps/web/app/s/[videoId]/_components/ShareVideo.tsx	Lazily mounts upload tracking and the upgrade modal while preserving the existing upload-state transitions.
apps/web/app/s/[videoId]/_components/UploadProgressTracker.tsx	Bridges the existing upload-progress query into player-local state only while an upload is active.
apps/web/app/s/[videoId]/_components/playback/playback-store.ts	Stops frame-rate sampling without subscribers and restarts it when a subscriber joins active playback.
apps/web/app/s/[videoId]/_components/utils/from-now.ts	Implements the English Moment relative-time behavior with calendar-aware month calculations and dedicated parity tests.
apps/web/app/s/[videoId]/_components/Sidebar.tsx	Dynamically loads non-default sidebar tabs and prewarms the largest tabs on pointer or keyboard focus.
apps/web/app/(org)/dashboard/DashboardContext.ts	Separates lightweight dashboard context definitions from provider-only dialog dependencies without changing the context contract.

_{Reviews (1): Last reviewed commit: "perf(web): stop the playback rAF loop wh..." | Re-trigger Greptile}

Context used:

• Knowledge Base — Web App (apps/web)

[cursor]

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.