@design.estate/dees-catalog 6.12.0 → 7.0.0

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

@@ -115,7 +115,7 @@ export const demo = () => {
         <h3>Non-Clickable</h3>
         <dees-thumbnail-pdf
           pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
-          clickable="false"
+          .clickable=${false}
         ></dees-thumbnail-pdf>
       </div>
 

package/ts_web/elements/00group-media/dees-thumbnail-shared/DeesThumbnailBase.ts

@@ -28,6 +28,7 @@ export abstract class DeesThumbnailBase extends DeesElement {
 
   private observer: IntersectionObserver | undefined;
   private _visible: boolean = false;
+  private observerConnectionEpoch = 0;
 
   /** Whether this tile is currently visible in the viewport */
   protected get isVisible(): boolean {
@@ -73,16 +74,20 @@ export abstract class DeesThumbnailBase extends DeesElement {
   }
 
   public async connectedCallback(): Promise<void> {
+    const connectionEpoch = ++this.observerConnectionEpoch;
     await super.connectedCallback();
+    if (!this.isConnected || connectionEpoch !== this.observerConnectionEpoch) return;
     this.setupIntersectionObserver();
   }
 
   public async disconnectedCallback(): Promise<void> {
+    this.observerConnectionEpoch += 1;
     await super.disconnectedCallback();
     if (this.observer) {
       this.observer.disconnect();
       this.observer = undefined;
     }
+    this._visible = false;
   }
 
   private setupIntersectionObserver(): void {