Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open Beginner friendly
  • Is something wrong?
#1,761 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
82/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend, performance

Research direction

Start at apps/playground/src/components/Header/ShareButton/ShareButton.tsx:17-19 and inspect how shareURL is initialized and how the existing effect handles the popover. Run apps/playground/src/components/Header/ShareButton/__tests__/ShareButton.test.tsx, especially the test that checks encoding waits until the popover opens. Done means hovering does not call encodeShareURL, while opening the popover still produces the share URL.

Written by the indexing model from the issue text.

Description

Area: Playground Difficulty: Low Enhancement Good First Issue Performance Priority: Low

The playground's Share button lz-compresses all of the selected instrument's files every time it renders, which blocks the main thread for about 200 ms per render when the instrument contains media. useState(encodeShareURL(...)) evaluates its argument on every render, not just the first, and throws the result away after mount. ShareButton re-renders when its tooltip opens and when it closes (hover in, hover out), when the popover opens, and whenever the selected instrument's label changes. Each of those renders compresses every file, including base64 media, on the main thread. For Interactive With Embedded Media (962 KB of file JSON), one compressToEncodedURIComponent call takes about 190 ms in Node. Hovering over the button costs two, opening the popover two more (the render plus the effect), and selecting the instrument one.

Where

apps/playground/src/components/Header/ShareButton/ShareButton.tsx:17-19:

const [shareURL, setShareURL] = useState(
  encodeShareURL({ baseURL: window.location.origin, files: editorFilesRef.current, label })
);

Reproduce

Mechanism and scale: select Interactive With Embedded Media, start a Performance recording, and move the pointer over and off the Share button. Each pass records two long tasks in compressToEncodedURIComponent. The cost grows linearly with the instrument's total file size. Interactive With Static Assets (354 KB) takes about 70 ms per render.

Tests

apps/playground/src/components/Header/ShareButton/__tests__/ShareButton.test.tsx (happy-dom, with encodeShareURL spied on): it('should not encode the share URL until the popover opens, so hovering the button does no compression'). No end-to-end test: the behaviour is unchanged, and the existing share-link specs cover the URL itself.

Suggested fix

Start shareURL as null and compute it only in the existing effect when the popover opens, showing a placeholder until then. The minimum fix is a lazy initializer, useState(() => encodeShareURL(...)).

Dominant language
TypeScript
Stars
119
Forks
19
Avg merge
1d 2h
Merged PRs (30d)
56

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from DouglasNeuroInformatics/OpenDataCapture

All issues in DouglasNeuroInformatics/OpenDataCapture

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.