Fix export responsiveness during image generation

[jldeen]

Summary

• Centralize PNG export work for wallpapers, Devémon cards, and README banners in a shared async export utility
• Avoid synchronous SVG data URL encoding for wallpaper exports by rendering from SVG blobs, yielding between heavy stages, and cleaning up canvases/resources
• Disable action buttons while an export/share operation is in progress so repeated clicks cannot stack multiple captures
• Add Playwright coverage that verifies the page remains interactive while wallpaper and Devémon card share/download work is in progress

Fixes #127.

Validation

• npm ci
• npm run check
• npm run build
• npm run test

Browser verification

• Playwright exercises mocked profile generation, starts wallpaper share/download export work with delayed browser image encoding, and verifies the app can still switch tabs during the operation.
• Playwright also exercises Devémon card sharing and confirms it does not show the Failed to generate card image. Please try again. alert from the screenshot while keeping the app interactive.

[Copilot]

Pull request overview

Centralizes asynchronous image export and improves UI responsiveness during PNG generation.

Changes:

• Adds shared SVG/DOM-to-PNG export utilities.
• Refactors wallpaper, card, and banner export/share flows.
• Adds busy button styling and Playwright responsiveness checks.

Show a summary per file

File	Description
tests/export-responsiveness.spec.ts	Adds wallpaper responsiveness tests.
src/utils/imageExport.ts	Introduces shared export utilities.
src/components/WallpaperGenerator.tsx	Adopts shared wallpaper export flow.
src/components/DevemonCard.tsx	Centralizes card export and sharing.
src/components/ReadmeBanner.tsx	Centralizes banner export and sharing.
src/components/ActionButtonsArea.tsx	Adds in-progress action state.
src/components/ui/Button.tsx	Supports asynchronous click handlers.
src/components/ui/Button.module.css	Styles disabled buttons.

Review details

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Suppressed comments (1)

src/utils/imageExport.ts:120

• If canvasToPngBlob rejects, these cleanup assignments are skipped, leaving html2canvas's potentially high-resolution backing store allocated until garbage collection. Use finally so failed card/banner exports release it immediately too.

  const blob = await canvasToPngBlob(canvas);

  canvas.width = 0;
  canvas.height = 0;

• Files reviewed: 8/8 changed files
• Comments generated: 4
• Review effort level: Balanced