fix: prevent double load on Vimeo video remount by deferring teardown

Author: Jerricho93

packages/vimeo-video-element/vimeo-video-element.js

@@ -113,6 +113,8 @@ class VimeoVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement ??
    * See load()
    */
   #wasDisconnected = false;
+  /** A disconnect whose teardown hasn't run yet. See disconnectedCallback(). */
+  #pendingTeardown = false;
 
   constructor() {
     super();
@@ -238,20 +240,34 @@ class VimeoVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement ??
   }
 
   connectedCallback() {
-    if (this.#wasDisconnected) {
+    // Re-attached before the deferred teardown ran (transient move/remount):
+    // keep the existing iframe and playback state. See disconnectedCallback.
+    if (this.#pendingTeardown) {
+      this.#pendingTeardown = false;
+    } else if (this.#wasDisconnected) {
+      // Re-attached after a real teardown: reload since attributes don't change
+      // on re-attach and wouldn't otherwise fire attributeChangedCallback.
+      // load() reads #wasDisconnected (remount vs SSR hydration) and clears it.
       this.load();
     }
     super.connectedCallback?.();
   }
 
   disconnectedCallback() {
-    this.#wasDisconnected = true;
-    this.#loadRequested = null;
-    this.#hasLoaded = null;
-    this.#isInit = null;
-    this.loadComplete = new PublicPromise();
-    this.api?.destroy?.();
-    this.api = null;
+    // Defer teardown so a synchronous detach + re-attach (React remount) can
+    // cancel it via connectedCallback, avoiding a needless destroy + rebuild (#249).
+    this.#pendingTeardown = true;
+    queueMicrotask(() => {
+      if (!this.#pendingTeardown) return;
+      this.#pendingTeardown = false;
+      this.#wasDisconnected = true;
+      this.#loadRequested = null;
+      this.#hasLoaded = null;
+      this.#isInit = null;
+      this.loadComplete = new PublicPromise();
+      this.api?.destroy?.();
+      this.api = null;
+    });
     super.disconnectedCallback?.();
   }