From fabab6b502f4a2d72caeb444c89035093f1414c6 Mon Sep 17 00:00:00 2001 From: Marcel Date: Wed, 15 Apr 2026 19:25:36 +0200 Subject: [PATCH] fix(pdf): merge setElements and render effects so canvas remount triggers re-render MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The refactor made pdfDoc a plain variable so renderer.isLoaded was not reactive. Svelte only tracked currentPage and scale — but when the canvas reappeared after loading, neither changed, so the PDF stayed blank. Fix: merge the two effects into one that reads canvasEl synchronously. Svelte now tracks canvasEl as a dependency; when the canvas remounts (loading spinner → false), the effect re-fires and renders the already-loaded PDF document. Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/lib/components/PdfViewer.svelte | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/frontend/src/lib/components/PdfViewer.svelte b/frontend/src/lib/components/PdfViewer.svelte index 87a651f3..844aa338 100644 --- a/frontend/src/lib/components/PdfViewer.svelte +++ b/frontend/src/lib/components/PdfViewer.svelte @@ -56,21 +56,20 @@ onMount(async () => { await renderer.init(); }); -// Wire DOM elements to the renderer after they mount -$effect(() => { - if (canvasEl && textLayerEl) { - renderer.setElements(canvasEl, textLayerEl); - } -}); - $effect(() => { if (renderer.pdfjsReady && url) { renderer.loadDocument(url); } }); +// Wire DOM elements to the renderer and trigger rendering. +// canvasEl is read synchronously so Svelte tracks it as a dependency: +// when the canvas reappears after the loading spinner (loading → false), +// this effect re-fires and renders the already-loaded PDF. $effect(() => { - // Read scale and currentPage synchronously so Svelte tracks them as dependencies. + if (!canvasEl || !textLayerEl) return; + renderer.setElements(canvasEl, textLayerEl); + // Also track currentPage and scale so page-nav / zoom re-renders work. if (renderer.isLoaded && renderer.currentPage && renderer.scale > 0) { renderer.renderCurrentPage().then(() => renderer.prerender()); }