diff --git a/package.json b/package.json index 2f44c5e7b..6154708d0 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "libsodium-wrappers": "^0.8.4", "mediabunny": "^1.46.0", "prismjs": "^1.29.0", - "qr-code-styling": "^1.5.0", + "qr-code-styling": "1.9.2", "rollup-plugin-visualizer": "^7.0.1", "sass": "^1.98.0", "solid-js": "1.9.9", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 86290d37b..1b18971d7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -105,7 +105,7 @@ importers: specifier: ^1.29.0 version: 1.30.0 qr-code-styling: - specifier: ^1.5.0 + specifier: 1.9.2 version: 1.9.2 rollup-plugin-visualizer: specifier: ^7.0.1 diff --git a/src/helpers/qrCode/paintQrCode.ts b/src/helpers/qrCode/paintQrCode.ts index 819183f37..b897aa7d2 100644 --- a/src/helpers/qrCode/paintQrCode.ts +++ b/src/helpers/qrCode/paintQrCode.ts @@ -74,22 +74,11 @@ export async function paintQrCode(options: PaintQrOptions) { const canvas = host.lastChild as HTMLCanvasElement; if (options.canvasClass) canvas.classList.add(options.canvasClass); - // qr-code-styling races the image-load against a 1s upper bound — matches the - // legacy behaviour so we don't leave the host stuck behind a never-loading logo. - let drawingPromise: Promise; - if (qrCode._drawingPromise) { - drawingPromise = qrCode._drawingPromise; - } else { - drawingPromise = Promise.race([ - pause(1000), - new Promise((resolve) => { - qrCode._canvas._image.addEventListener('load', () => { - window.requestAnimationFrame(() => resolve()); - }, { once: true }); - }), - ]); - } - await drawingPromise; + // qr-code-styling exposes `_canvasDrawingPromise`, which resolves once the SVG + // (logo image included) has been rasterized onto the canvas. Cap it with a 1s + // upper bound so a never-loading logo can't leave the host stuck behind a + // preloader, matching the legacy behaviour. + await Promise.race([pause(1000), qrCode._canvasDrawingPromise ?? Promise.resolve()]); return { canvas, qrCode }; }