@design.estate/dees-catalog 6.12.0 → 7.0.0

package/ts_web/elements/00group-media/dees-thumbnail-pdf/component.ts

@@ -1,9 +1,16 @@
 import { property, state, html, customElement, type TemplateResult, type CSSResult } from '@design.estate/dees-element';
+import type { PDFDocumentProxy, RenderTask } from 'pdfjs-dist';
 import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
 import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
 import { CanvasPool, type PooledCanvas } from '../dees-pdf-shared/CanvasPool.js';
-import { PerformanceMonitor, throttle, formatFileSize } from '../dees-pdf-shared/utils.js';
+import {
+  throttle,
+  formatFileSize,
+  raceWithAbort,
+  settlePromisesWithin,
+  waitForAnimationFrame,
+} from '../dees-pdf-shared/utils.js';
 import { tilePdfStyles } from './styles.js';
 import { demo as demoFunc } from './demo.js';
 
@@ -13,6 +20,13 @@ declare global {
   }
 }
 
+interface ILoadOperation {
+  key: string;
+  promise: Promise<void>;
+}
+
+const pipelineSettlementGraceMs = 2_500;
+
 @customElement('dees-thumbnail-pdf')
 export class DeesThumbnailPdf extends DeesThumbnailBase {
   public static demo = demoFunc;
@@ -41,8 +55,21 @@ export class DeesThumbnailPdf extends DeesThumbnailBase {
   accessor fileSize: number = 0;
 
   private renderPagesTask: Promise<void> | null = null;
+  private renderPagesRequestPromise: Promise<void> | null = null;
+  private currentPageRenderTask: RenderTask | null = null;
   private renderPagesQueued: boolean = false;
-  private pdfDocument: any;
+  private renderQueueEpoch = 0;
+  private pdfDocument: PDFDocumentProxy | null = null;
+  private pdfLoadPromise: Promise<PDFDocumentProxy> | null = null;
+  private loadAbortController: AbortController | null = null;
+  private loadOperation: ILoadOperation | null = null;
+  private loadGeneration = 0;
+  private connectionEpoch = 0;
+  private cleanupPromise: Promise<void> | null = null;
+  private renderFailurePromise: Promise<void> | null = null;
+  private renderAdmissionOpen = false;
+  private renderGeneration = 0;
+  private documentUsePipelines = new Set<Promise<void>>();
   private canvases: PooledCanvas[] = [];
   private resizeObserver?: ResizeObserver;
   private stackElement: HTMLElement | null = null;
@@ -90,8 +117,8 @@ export class DeesThumbnailPdf extends DeesThumbnailBase {
   }
 
   protected onBecameVisible(): void {
-    if (!this.rendered && this.pdfUrl) {
-      this.loadAndRenderPreview();
+    if (this.isConnected && !this.rendered && this.pdfUrl) {
+      void this.schedulePdfLoad(this.connectionEpoch);
     }
   }
 
@@ -103,7 +130,6 @@ export class DeesThumbnailPdf extends DeesThumbnailBase {
     this.isHovering = false;
     if (this.currentPreviewPage !== 1) {
       this.currentPreviewPage = 1;
-      void this.scheduleRenderPages();
     }
   }
 
@@ -119,171 +145,376 @@ export class DeesThumbnailPdf extends DeesThumbnailBase {
 
     if (newPage !== this.currentPreviewPage) {
       this.currentPreviewPage = newPage;
-      void this.scheduleRenderPages();
     }
   }
 
   public async connectedCallback(): Promise<void> {
+    const connectionEpoch = ++this.connectionEpoch;
     await super.connectedCallback();
     await this.updateComplete;
+    if (!this.isConnected || connectionEpoch !== this.connectionEpoch) return;
     this.cacheElements();
     this.setupResizeObserver();
+    if (
+      this.pdfUrl
+      && this.isVisible
+    ) {
+      const operationKey = `${connectionEpoch}:${this.pdfUrl}`;
+      if (this.loadOperation?.key === operationKey) {
+        await this.loadOperation.promise;
+      } else if (connectionEpoch > 1 || !this.pdfDocument) {
+        await this.schedulePdfLoad(connectionEpoch);
+      }
+    }
   }
 
   public async disconnectedCallback(): Promise<void> {
+    this.connectionEpoch += 1;
+    this.loadGeneration += 1;
+    this.renderAdmissionOpen = false;
+    this.loadAbortController?.abort();
+    const cleanupPromise = this.cleanup();
     await super.disconnectedCallback();
-    this.cleanup();
-    this.resizeObserver?.disconnect();
-    this.resizeObserver = undefined;
+    await cleanupPromise;
   }
 
-  private async loadAndRenderPreview(): Promise<void> {
-    if (this.rendered || this.loading) return;
+  private schedulePdfLoad(connectionEpochArg: number): Promise<void> {
+    const url = this.pdfUrl;
+    const key = `${connectionEpochArg}:${url}`;
+    if (this.loadOperation?.key === key) {
+      return this.loadOperation.promise;
+    }
+    const generation = ++this.loadGeneration;
+    const operation: ILoadOperation = {
+      key,
+      promise: Promise.resolve(),
+    };
+    operation.promise = this.performPdfLoad(generation, connectionEpochArg, url)
+      .finally(() => {
+        if (this.loadOperation === operation) {
+          this.loadOperation = null;
+        }
+      });
+    this.loadOperation = operation;
+    return operation.promise;
+  }
+
+  private isCurrentLoad(generationArg: number, connectionEpochArg: number, urlArg: string): boolean {
+    return this.isConnected
+      && generationArg === this.loadGeneration
+      && connectionEpochArg === this.connectionEpoch
+      && urlArg === this.pdfUrl;
+  }
+
+  private async performPdfLoad(
+    generationArg: number,
+    connectionEpochArg: number,
+    urlArg: string,
+  ): Promise<void> {
+    await this.cleanup();
+    if (
+      !this.isCurrentLoad(generationArg, connectionEpochArg, urlArg)
+      || !urlArg
+      || !this.isVisible
+    ) return;
 
     this.loading = true;
     this.error = false;
-    PerformanceMonitor.mark(`preview-load-${this.pdfUrl}`);
+    const loadStartedAt = performance.now();
+    const abortController = new AbortController();
+    this.loadAbortController = abortController;
+    const { signal } = abortController;
 
     try {
-      this.pdfDocument = await PdfManager.loadDocument(this.pdfUrl);
-      this.pageCount = this.pdfDocument.numPages;
-      this.currentPreviewPage = 1;
-
+      const pdfLoadPromise = PdfManager.loadDocument(urlArg, signal);
+      this.pdfLoadPromise = pdfLoadPromise;
+      let pdfDocument: PDFDocumentProxy;
       try {
-        const downloadInfo = await this.pdfDocument.getDownloadInfo();
-        this.fileSize = downloadInfo.length;
-      } catch {
-        // File size unavailable — not critical
+        pdfDocument = await pdfLoadPromise;
+      } finally {
+        if (this.pdfLoadPromise === pdfLoadPromise) {
+          this.pdfLoadPromise = null;
+        }
       }
-      this.loadedPdfUrl = this.pdfUrl;
-
-      this.loading = false;
-      await this.updateComplete;
-      this.cacheElements();
+      if (!this.isCurrentLoad(generationArg, connectionEpochArg, urlArg) || signal.aborted) {
+        await PdfManager.releaseDocument(pdfDocument);
+        return;
+      }
+      this.pdfDocument = pdfDocument;
+      this.renderAdmissionOpen = true;
+      const documentUsePipeline = (async () => {
+        this.pageCount = pdfDocument.numPages;
+        this.currentPreviewPage = 1;
+
+        try {
+          const downloadInfo = await raceWithAbort(pdfDocument.getDownloadInfo(), signal);
+          if (!this.isCurrentLoad(generationArg, connectionEpochArg, urlArg)) return;
+          this.fileSize = downloadInfo.length;
+        } catch {
+          if (!this.isCurrentLoad(generationArg, connectionEpochArg, urlArg)) return;
+        }
+        this.loadedPdfUrl = urlArg;
+
+        this.loading = false;
+        await this.updateComplete;
+        if (!this.isCurrentLoad(generationArg, connectionEpochArg, urlArg)) return;
+        this.cacheElements();
+        this.setupResizeObserver();
+
+        await this.scheduleRenderPages();
+        if (!this.isCurrentLoad(generationArg, connectionEpochArg, urlArg)) return;
+        this.rendered = true;
+
+        const duration = performance.now() - loadStartedAt;
+        console.log(`PDF tile rendered in ${duration}ms`);
+      })();
+      this.documentUsePipelines.add(documentUsePipeline);
+      try {
+        await documentUsePipeline;
+      } finally {
+        this.documentUsePipelines.delete(documentUsePipeline);
+      }
+    } catch (error) {
+      if (this.isCurrentLoad(generationArg, connectionEpochArg, urlArg) && !signal.aborted) {
+        await this.handleDocumentFailure(
+          error,
+          generationArg,
+          connectionEpochArg,
+          urlArg,
+          this.pdfDocument,
+        );
+      }
+    }
+  }
 
-      await this.scheduleRenderPages();
-      this.rendered = true;
+  private requestRenderPages(): void {
+    const requestPromise = this.scheduleRenderPages();
+    if (this.renderPagesRequestPromise === requestPromise) return;
+    this.renderPagesRequestPromise = requestPromise;
+    const generation = this.loadGeneration;
+    const connectionEpoch = this.connectionEpoch;
+    const url = this.pdfUrl;
+    const pdfDocument = this.pdfDocument;
+    void requestPromise.catch(async (error) => {
+      await this.handleDocumentFailure(
+        error,
+        generation,
+        connectionEpoch,
+        url,
+        pdfDocument,
+      );
+    }).finally(() => {
+      if (this.renderPagesRequestPromise === requestPromise) {
+        this.renderPagesRequestPromise = null;
+      }
+    }).catch(() => {});
+  }
 
-      const duration = PerformanceMonitor.measure(`preview-render-${this.pdfUrl}`, `preview-load-${this.pdfUrl}`);
-      console.log(`PDF tile rendered in ${duration}ms`);
-    } catch (error) {
-      console.error('Failed to load PDF tile:', error);
-      this.error = true;
-      this.loading = false;
+  private handleDocumentFailure(
+    errorArg: unknown,
+    generationArg: number,
+    connectionEpochArg: number,
+    urlArg: string,
+    pdfDocumentArg: PDFDocumentProxy | null,
+  ): Promise<void> {
+    if (
+      errorArg instanceof Error
+      && ['AbortError', 'AbortException', 'RenderingCancelledException'].includes(errorArg.name)
+    ) {
+      return Promise.resolve();
     }
+    if (
+      !this.isCurrentLoad(generationArg, connectionEpochArg, urlArg)
+      || (pdfDocumentArg && pdfDocumentArg !== this.pdfDocument)
+    ) {
+      return Promise.resolve();
+    }
+    if (this.renderFailurePromise) return this.renderFailurePromise;
+
+    this.renderAdmissionOpen = false;
+    this.loadAbortController?.abort();
+    console.error('Failed to load or render PDF thumbnail:', errorArg);
+    const failurePromise = (async () => {
+      await this.cleanup();
+      if (
+        this.isConnected
+        && generationArg === this.loadGeneration
+        && connectionEpochArg === this.connectionEpoch
+        && urlArg === this.pdfUrl
+      ) {
+        this.error = true;
+        this.loading = false;
+      }
+    })();
+    this.renderFailurePromise = failurePromise;
+    void failurePromise.finally(() => {
+      if (this.renderFailurePromise === failurePromise) {
+        this.renderFailurePromise = null;
+      }
+    }).catch(() => {});
+    return failurePromise;
   }
 
   private scheduleRenderPages(): Promise<void> {
-    if (!this.pdfDocument) {
+    if (!this.renderAdmissionOpen || !this.pdfDocument) {
       return Promise.resolve();
     }
 
     if (this.renderPagesTask) {
+      this.renderGeneration += 1;
       this.renderPagesQueued = true;
+      try {
+        this.currentPageRenderTask?.cancel();
+      } catch {
+        // The active task remains part of the render queue settlement.
+      }
       return this.renderPagesTask;
     }
 
-    this.renderPagesTask = (async () => {
-      try {
-        await this.performRenderPages();
-      } catch (error) {
-        console.error('Failed to render PDF tile pages:', error);
-      }
-    })().finally(() => {
-      this.renderPagesTask = null;
-      if (this.renderPagesQueued) {
+    this.renderGeneration += 1;
+    const renderQueueEpoch = ++this.renderQueueEpoch;
+    const renderPagesTask = (async () => {
+      do {
+        if (renderQueueEpoch !== this.renderQueueEpoch) return;
         this.renderPagesQueued = false;
-        void this.scheduleRenderPages();
+        const renderGeneration = this.renderGeneration;
+        await this.performRenderPages(renderGeneration);
+      } while (
+        renderQueueEpoch === this.renderQueueEpoch
+        && this.renderPagesQueued
+        && this.renderAdmissionOpen
+        && this.pdfDocument
+      );
+    })();
+    this.renderPagesTask = renderPagesTask;
+    void renderPagesTask.finally(() => {
+      if (this.renderPagesTask === renderPagesTask) {
+        this.renderPagesTask = null;
       }
-    });
+    }).catch(() => {});
 
-    return this.renderPagesTask;
+    return renderPagesTask;
   }
 
-  private async performRenderPages(): Promise<void> {
-    if (!this.pdfDocument) return;
+  private async performRenderPages(renderGenerationArg: number): Promise<void> {
+    const pdfDocument = this.pdfDocument;
+    const signal = this.loadAbortController?.signal;
+    if (!this.renderAdmissionOpen || !pdfDocument || !signal) return;
+
+    const isCurrentRender = (): boolean => (
+      this.isConnected
+      && this.renderAdmissionOpen
+      && !signal.aborted
+      && renderGenerationArg === this.renderGeneration
+      && pdfDocument === this.pdfDocument
+    );
 
-    await new Promise(resolve => requestAnimationFrame(resolve));
+    await waitForAnimationFrame();
+    if (!isCurrentRender()) return;
 
     const canvas = this.shadowRoot?.querySelector('.preview-canvas') as HTMLCanvasElement;
-    if (!canvas) return;
+    if (!canvas) throw new Error('PDF thumbnail preview canvas is unavailable');
 
     this.clearCanvases();
     this.cacheElements();
 
     const { availableWidth, availableHeight } = this.getAvailableSize();
 
+    let pooledCanvas: PooledCanvas | undefined;
+    let pooledCanvasRenderSettled = true;
     try {
       const pageNum = this.currentPreviewPage;
-      const page = await this.pdfDocument.getPage(pageNum);
-
-      const initialViewport = page.getViewport({ scale: 1 });
-      const aspectRatio = initialViewport.height / initialViewport.width;
-
-      const a4PortraitRatio = 1.414;
-      const a4LandscapeRatio = 0.707;
-      const letterPortraitRatio = 1.294;
-      const letterLandscapeRatio = 0.773;
-      const tolerance = 0.05;
-
-      const isA4Portrait = Math.abs(aspectRatio - a4PortraitRatio) < (a4PortraitRatio * tolerance);
-      const isA4Landscape = Math.abs(aspectRatio - a4LandscapeRatio) < (a4LandscapeRatio * tolerance);
-      const isLetterPortrait = Math.abs(aspectRatio - letterPortraitRatio) < (letterPortraitRatio * tolerance);
-      const isLetterLandscape = Math.abs(aspectRatio - letterLandscapeRatio) < (letterLandscapeRatio * tolerance);
-
-      this.isA4Format = isA4Portrait || isA4Landscape || isLetterPortrait || isLetterLandscape;
-
-      const adjustedWidth = this.isA4Format ? availableWidth : availableWidth - 24;
-      const adjustedHeight = this.isA4Format ? availableHeight : availableHeight - 24;
-
-      const scaleX = adjustedWidth > 0 ? adjustedWidth / initialViewport.width : 0;
-      const scaleY = adjustedHeight > 0 ? adjustedHeight / initialViewport.height : 0;
-      const baseScale = Math.min(scaleX || 0.5, scaleY || scaleX || 0.5);
-      const renderScale = Math.min(baseScale * 2, 3.0);
-
-      if (!Number.isFinite(renderScale) || renderScale <= 0) {
-        page.cleanup?.();
-        return;
-      }
+      const page = await raceWithAbort(pdfDocument.getPage(pageNum), signal);
+      try {
+        if (!isCurrentRender()) return;
+        const initialViewport = page.getViewport({ scale: 1 });
+        const aspectRatio = initialViewport.height / initialViewport.width;
 
-      const viewport = page.getViewport({ scale: renderScale });
+        const a4PortraitRatio = 1.414;
+        const a4LandscapeRatio = 0.707;
+        const letterPortraitRatio = 1.294;
+        const letterLandscapeRatio = 0.773;
+        const tolerance = 0.05;
 
-      const pooledCanvas = CanvasPool.acquire(viewport.width, viewport.height);
-      this.canvases.push(pooledCanvas);
+        const isA4Portrait = Math.abs(aspectRatio - a4PortraitRatio) < (a4PortraitRatio * tolerance);
+        const isA4Landscape = Math.abs(aspectRatio - a4LandscapeRatio) < (a4LandscapeRatio * tolerance);
+        const isLetterPortrait = Math.abs(aspectRatio - letterPortraitRatio) < (letterPortraitRatio * tolerance);
+        const isLetterLandscape = Math.abs(aspectRatio - letterLandscapeRatio) < (letterLandscapeRatio * tolerance);
 
-      const renderContext = {
-        canvasContext: pooledCanvas.ctx,
-        viewport: viewport,
-      };
+        this.isA4Format = isA4Portrait || isA4Landscape || isLetterPortrait || isLetterLandscape;
 
-      await page.render(renderContext).promise;
+        const adjustedWidth = this.isA4Format ? availableWidth : availableWidth - 24;
+        const adjustedHeight = this.isA4Format ? availableHeight : availableHeight - 24;
 
-      canvas.width = viewport.width;
-      canvas.height = viewport.height;
+        const scaleX = adjustedWidth > 0 ? adjustedWidth / initialViewport.width : 0;
+        const scaleY = adjustedHeight > 0 ? adjustedHeight / initialViewport.height : 0;
+        const baseScale = Math.min(scaleX || 0.5, scaleY || scaleX || 0.5);
+        const renderScale = Math.min(baseScale * 2, 3.0);
 
-      const displayWidth = adjustedWidth;
-      const displayHeight = (viewport.height / viewport.width) * adjustedWidth;
+        if (!Number.isFinite(renderScale) || renderScale <= 0) {
+          throw new Error('PDF thumbnail render scale is invalid');
+        }
 
-      if (displayHeight > adjustedHeight) {
-        const altDisplayHeight = adjustedHeight;
-        const altDisplayWidth = (viewport.width / viewport.height) * adjustedHeight;
-        canvas.style.width = `${altDisplayWidth}px`;
-        canvas.style.height = `${altDisplayHeight}px`;
-      } else {
-        canvas.style.width = `${displayWidth}px`;
-        canvas.style.height = `${displayHeight}px`;
-      }
+        const viewport = page.getViewport({ scale: renderScale });
+        pooledCanvas = CanvasPool.acquire(viewport.width, viewport.height);
+        this.canvases.push(pooledCanvas);
+
+        const renderTask = page.render({
+          canvasContext: pooledCanvas.ctx,
+          viewport,
+        });
+        this.currentPageRenderTask = renderTask;
+        pooledCanvasRenderSettled = false;
+        const trackedRenderPromise = renderTask.promise.finally(() => {
+          pooledCanvasRenderSettled = true;
+        });
+        try {
+          await raceWithAbort(trackedRenderPromise, signal);
+        } finally {
+          if (this.currentPageRenderTask === renderTask) {
+            this.currentPageRenderTask = null;
+          }
+        }
+        if (!isCurrentRender()) return;
+
+        canvas.width = viewport.width;
+        canvas.height = viewport.height;
+
+        const displayWidth = adjustedWidth;
+        const displayHeight = (viewport.height / viewport.width) * adjustedWidth;
+
+        if (displayHeight > adjustedHeight) {
+          const altDisplayHeight = adjustedHeight;
+          const altDisplayWidth = (viewport.width / viewport.height) * adjustedHeight;
+          canvas.style.width = `${altDisplayWidth}px`;
+          canvas.style.height = `${altDisplayHeight}px`;
+        } else {
+          canvas.style.width = `${displayWidth}px`;
+          canvas.style.height = `${displayHeight}px`;
+        }
 
-      const ctx = canvas.getContext('2d');
-      if (ctx) {
+        const ctx = canvas.getContext('2d');
+        if (!ctx) throw new Error('PDF thumbnail preview context is unavailable');
         ctx.imageSmoothingEnabled = true;
         ctx.imageSmoothingQuality = 'high';
         ctx.drawImage(pooledCanvas.canvas, 0, 0);
+      } finally {
+        page.cleanup();
+      }
+    } catch (error: unknown) {
+      if (
+        error instanceof Error
+        && ['AbortError', 'AbortException', 'RenderingCancelledException'].includes(error.name)
+      ) {
+        return;
+      }
+      throw error;
+    } finally {
+      if (pooledCanvas && pooledCanvasRenderSettled) {
+        const canvasIndex = this.canvases.indexOf(pooledCanvas);
+        if (canvasIndex >= 0) this.canvases.splice(canvasIndex, 1);
+        CanvasPool.release(pooledCanvas);
       }
-
-      page.cleanup();
-    } catch (error) {
-      console.error(`Failed to render page ${this.currentPreviewPage}:`, error);
     }
   }
 
@@ -294,15 +525,89 @@ export class DeesThumbnailPdf extends DeesThumbnailBase {
     this.canvases = [];
   }
 
-  private cleanup(): void {
-    this.clearCanvases();
+  private discardCanvases(): void {
+    for (const pooledCanvas of this.canvases) {
+      CanvasPool.discard(pooledCanvas);
+    }
+    this.canvases = [];
+  }
 
-    if (this.pdfDocument) {
-      PdfManager.releaseDocument(this.loadedPdfUrl ?? this.pdfUrl);
-      this.pdfDocument = null;
+  private cleanup(): Promise<void> {
+    if (this.cleanupPromise) {
+      return this.cleanupPromise;
     }
+    const cleanupPromise = this.performCleanup();
+    this.cleanupPromise = cleanupPromise;
+    void cleanupPromise.finally(() => {
+      if (this.cleanupPromise === cleanupPromise) {
+        this.cleanupPromise = null;
+      }
+    }).catch(() => {});
+    return cleanupPromise;
+  }
 
+  private async performCleanup(): Promise<void> {
+    this.renderAdmissionOpen = false;
+    this.renderGeneration += 1;
+    this.renderQueueEpoch += 1;
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = undefined;
+    const abortController = this.loadAbortController;
+    this.loadAbortController = null;
+    abortController?.abort();
+    const loadOperation = this.loadOperation;
+    const pdfLoadPromise = this.pdfLoadPromise;
+    const renderPagesTask = this.renderPagesTask;
+    const currentPageRenderTask = this.currentPageRenderTask;
+    const documentUsePipelines = [...this.documentUsePipelines];
     this.renderPagesQueued = false;
+    try {
+      currentPageRenderTask?.cancel();
+    } catch {
+      // The tracked render promise still participates in settlement below.
+    }
+
+    const pdfDocument = this.pdfDocument;
+    this.pdfDocument = null;
+    const releasePromise = pdfDocument
+      ? PdfManager.releaseDocument(pdfDocument).catch((error) => {
+          console.error('Failed to release PDF tile document:', error);
+        })
+      : null;
+
+    const pipelinesSettled = await settlePromisesWithin([
+      ...(pdfLoadPromise ? [pdfLoadPromise] : []),
+      ...documentUsePipelines,
+      ...(renderPagesTask ? [renderPagesTask] : []),
+      ...(currentPageRenderTask ? [currentPageRenderTask.promise] : []),
+      ...(releasePromise ? [releasePromise] : []),
+    ], pipelineSettlementGraceMs);
+    if (this.pdfLoadPromise === pdfLoadPromise) {
+      this.pdfLoadPromise = null;
+    }
+    if (this.loadOperation === loadOperation) {
+      this.loadOperation = null;
+    }
+    if (this.renderPagesTask === renderPagesTask) {
+      this.renderPagesTask = null;
+    }
+    if (this.currentPageRenderTask === currentPageRenderTask) {
+      this.currentPageRenderTask = null;
+    }
+    this.documentUsePipelines.clear();
+
+    if (pipelinesSettled) {
+      this.clearCanvases();
+    } else {
+      this.discardCanvases();
+    }
+    const previewCanvas = this.shadowRoot?.querySelector<HTMLCanvasElement>('.preview-canvas');
+    if (previewCanvas) {
+      previewCanvas.width = 0;
+      previewCanvas.height = 0;
+      previewCanvas.style.removeProperty('width');
+      previewCanvas.style.removeProperty('height');
+    }
     this.pageCount = 0;
     this.currentPreviewPage = 1;
     this.isHovering = false;
@@ -312,28 +617,22 @@ export class DeesThumbnailPdf extends DeesThumbnailBase {
     this.rendered = false;
     this.loading = false;
     this.error = false;
+    this.fileSize = 0;
   }
 
   public async updated(changedProperties: Map<PropertyKey, unknown>): Promise<void> {
     super.updated(changedProperties);
 
-    if (changedProperties.has('pdfUrl') && this.pdfUrl) {
-      const previousUrl = changedProperties.get('pdfUrl') as string | undefined;
-      if (previousUrl) {
-        PdfManager.releaseDocument(previousUrl);
-      }
-      this.cleanup();
-      this.rendered = false;
-      this.currentPreviewPage = 1;
-
-      const rect = this.getBoundingClientRect();
-      if (rect.top < window.innerHeight && rect.bottom > 0) {
-        this.loadAndRenderPreview();
-      }
+    if (changedProperties.has('pdfUrl') && this.isConnected) {
+      await this.schedulePdfLoad(this.connectionEpoch);
     }
 
-    if (changedProperties.has('currentPreviewPage') && this.rendered) {
-      await this.scheduleRenderPages();
+    if (
+      changedProperties.has('currentPreviewPage')
+      && this.renderAdmissionOpen
+      && this.rendered
+    ) {
+      this.requestRenderPages();
     }
   }
 
@@ -409,7 +708,7 @@ export class DeesThumbnailPdf extends DeesThumbnailBase {
 
     this.resizeObserver = new ResizeObserver(() => {
       if (this.rendered && this.pdfDocument && !this.loading) {
-        void this.scheduleRenderPages();
+        this.requestRenderPages();
       }
     });