The playground Share button lz-compresses every file on each render, blocking about 200 ms per hover for media instruments #1761

Activity

1. joshunrau

   added

   Priority: LowNice to have, cosmetic or speculativeNice to have, cosmetic or speculative

   EnhancementType: an improvement to an existing feature, including performanceType: an improvement to an existing feature, including performance

   Difficulty: LowIsolated change, about 2 hours or lessIsolated change, about 2 hours or less

   Area: Playgroundapps/playground (in-browser instrument editor)apps/playground (in-browser instrument editor)

   PerformanceSpeed, memory or scalabilitySpeed, memory or scalability

   Good First IssueWell-scoped, low-risk and self-contained; a good entry point for a new contributorWell-scoped, low-risk and self-contained; a good entry point for a new contributor

   on Oct 7, 2026
2. joshunrau commented on Oct 26, 2026

   

   joshunrau

   on Oct 26, 2026

   CollaboratorAuthor

   More actions

   Still reproduces on main (d86740e). ShareButton.tsx has not changed since this was filed.

   More compressions than the issue counts

   • Opening the popover costs three, not two: the render, the effect at ShareButton.tsx:25-36, and the re-render its setShareURL causes, which evaluates the eager argument again. Each Preview Mode toggle also costs three, and closing the popover costs one.
   • The Radix tooltip trigger opens on focus and closes on blur, so tabbing past the button costs two, the same as a hover.
   • Save re-renders the button without changing the label. IndexPage subscribes to store.instruments (IndexPage.tsx:23) and renders Header, which is not memoized. updateSelectedInstrument (SaveButton.tsx:32) writes a new instruments array. So every save of a media instrument pays for one compression it never uses. A language switch costs one too, because useTranslation re-renders on languageChange.
   • apps/playground/src/main.tsx:17 wraps the app in StrictMode, so on the dev server every compression made during render runs twice. Measure on a production build.

   Fix

   The placeholder isn't needed. Popover.Content unmounts its children while the popover is closed (Radix Presence). So move the popover body into a SharePopoverContent component in the same folder and derive the link during render:

   const files = useAppStore((store) => store.files);
   const label = useAppStore((store) => store.selectedInstrument.label);
   const shareURL = useMemo(
     () => encodeShareURL({ baseURL: window.location.origin, files, fullscreen: isFullscreen, label }),
     [files, isFullscreen, label]
   );

   That removes the shareURL state, the effect and its comment. ShareButton no longer reads the files or the label. Opening costs one compression and so does each toggle. Hover, focus, Save and language switches cost none.

   Keep the isFullscreen state in ShareButton and pass it and its setter down. If it moves into the new component, Preview Mode resets on every open, which it does not do today. Read files with a selector, not useFilesRef: that hook drops the unsubscribe function that subscribe returns (useFilesRef.ts:7-14), so a component that mounts on every open would add a listener each time.

   The lazy initializer on its own also stops the hover, Save and language compressions. It still compresses once at mount, and each open still renders twice.

   Tests

   • Unit: the playground project runs in node, so ShareButton.test.tsx needs // @vitest-environment happy-dom as its first line, as apps/gateway/src/components/__tests__/Cap.test.tsx has. On main, apps/playground declares none of happy-dom, @testing-library/react or @testing-library/dom. All three are existing catalog entries. build: upgrade dependencies held back by breaking changes #1660 adds them to apps/playground/package.json and documents the docblock in the playground AGENTS.md ## Tests section. Either land after build: upgrade dependencies held back by breaking changes #1660, or add them here and update that section yourself (fix: resolve 26 low-difficulty issues, one commit each #1825 edits it too). The store imports src/instruments/index.ts, which top-level-awaits a fetch of every binary example (lines 20-22), and it persists through idb-keyval. Mock @/instruments and idb-keyval and drive the real useAppStore, as the slice tests that fix: resolve 26 low-difficulty issues, one commit each #1825 adds under src/store/slices/__tests__/ do. Cover these cases: hover, focus and blur never call encodeShareURL; opening calls it once; the switch adds fullscreen=1.
   • E2E: no spec opens the Share popover. Every share test in testing/src/specs/playground.spec.ts builds its link with generatePlaygroundURL and navigates to it. Add one that loads such a link, opens the popover and reads the #link input. It should check that decodeShareURL gives back the same label and files, then turn on the Preview Mode switch and check isFullscreenShareURL. The Share trigger has no accessible name until Playground icon-only buttons have no accessible names, and editor tabs cannot be closed from the keyboard #1763 is fixed, so either land after it or add the trigger's aria-label here. Put an openSharePopover() method on testing/src/pages/playground/index.page.ts. build: upgrade dependencies held back by breaking changes #1660 and fix(playground): search instruments by label #1817 both edit that file and the spec.

   _{Triage note written with Claude Code. Code references point at main @ d86740e.}