diff --git a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor index 82e52514..dcdf9971 100644 --- a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor +++ b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor @@ -223,7 +223,8 @@ _currentPage = await JSRuntime.InvokeAsync("pdfViewer.getCurrentPage"); await InvokeAsync(StateHasChanged); - // Render thumbnails + // Wait for DOM to be ready, then render thumbnails + await Task.Delay(100); await RenderThumbnailsAsync(); } } catch (Exception ex) { @@ -304,11 +305,18 @@ async Task RenderThumbnailsAsync() { try { + // Sequential rendering to avoid overwhelming the browser for (int i = 1; i <= _totalPages; i++) { await JSRuntime.InvokeVoidAsync("pdfViewer.renderThumbnail", i, $"thumb-canvas-{i}"); + + // Small delay between renders to keep UI responsive + if (i < _totalPages) { + await Task.Delay(50); + } } - } catch (Exception) { + } catch (Exception ex) { // Thumbnail rendering is not critical + System.Diagnostics.Debug.WriteLine($"Thumbnail rendering error: {ex.Message}"); } } diff --git a/EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js b/EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js index 0f66a55d..91c8f650 100644 --- a/EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js +++ b/EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js @@ -234,11 +234,25 @@ window.pdfViewer = { }, async renderThumbnail(pageNum, canvasId) { - if (!this.pdfDoc) return; + if (!this.pdfDoc) { + console.error('PDF document not loaded for thumbnail:', pageNum); + return; + } try { - const canvas = document.getElementById(canvasId); - if (!canvas) return; + // Wait for canvas to be in DOM + let canvas = document.getElementById(canvasId); + let retries = 0; + while (!canvas && retries < 10) { + await new Promise(resolve => setTimeout(resolve, 100)); + canvas = document.getElementById(canvasId); + retries++; + } + + if (!canvas) { + console.error('Canvas not found after retries:', canvasId); + return; + } const page = await this.pdfDoc.getPage(pageNum); const viewport = page.getViewport({ scale: 0.2 }); @@ -254,7 +268,7 @@ window.pdfViewer = { await page.render(renderContext).promise; } catch (error) { - // Thumbnail rendering errors are non-critical + console.error('Error rendering thumbnail', pageNum, ':', error); } },