@economist/web-apple-pay 1.10.0 → 1.10.1

package/dist/index.js

@@ -2211,18 +2211,32 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       if (await this.#fetchAndCacheOptions()) return;
       this.#finishLoading();
     } catch {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
     } finally {
       this.#rendering = false;
     }
   }
+  /**
+   * Stop the loading spinner before tear-down so Safari does not leave a GPU
+   * ghost of `.apple-pay-btn.wap-loading::before` after the container is removed.
+   */
+  #hide() {
+    const button = this.querySelector(SEL_BUTTON);
+    if (button) {
+      button.classList.remove("wap-loading");
+      button.removeAttribute("aria-busy");
+      button.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    }
+    this.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    void this.offsetHeight;
+    this.style.display = "none";
+    this.querySelector(SEL_CONTAINER)?.remove();
+  }
   /** Returns `true` (hide) when Apple Pay is unavailable on this device/browser. */
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2234,8 +2248,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #checkSession() {
     this.#sessionData = await this.#fetchSession();
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2243,8 +2256,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2271,8 +2283,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.options?.apple_pay) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;

package/dist/src/apple-pay-button.js

@@ -2200,18 +2200,32 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       if (await this.#fetchAndCacheOptions()) return;
       this.#finishLoading();
     } catch {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
     } finally {
       this.#rendering = false;
     }
   }
+  /**
+   * Stop the loading spinner before tear-down so Safari does not leave a GPU
+   * ghost of `.apple-pay-btn.wap-loading::before` after the container is removed.
+   */
+  #hide() {
+    const button = this.querySelector(SEL_BUTTON);
+    if (button) {
+      button.classList.remove("wap-loading");
+      button.removeAttribute("aria-busy");
+      button.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    }
+    this.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    void this.offsetHeight;
+    this.style.display = "none";
+    this.querySelector(SEL_CONTAINER)?.remove();
+  }
   /** Returns `true` (hide) when Apple Pay is unavailable on this device/browser. */
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2223,8 +2237,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #checkSession() {
     this.#sessionData = await this.#fetchSession();
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2232,8 +2245,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2260,8 +2272,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.options?.apple_pay) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;

package/dist/src/apple-pay-button.stories.js

@@ -2208,18 +2208,32 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       if (await this.#fetchAndCacheOptions()) return;
       this.#finishLoading();
     } catch {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
     } finally {
       this.#rendering = false;
     }
   }
+  /**
+   * Stop the loading spinner before tear-down so Safari does not leave a GPU
+   * ghost of `.apple-pay-btn.wap-loading::before` after the container is removed.
+   */
+  #hide() {
+    const button = this.querySelector(SEL_BUTTON);
+    if (button) {
+      button.classList.remove("wap-loading");
+      button.removeAttribute("aria-busy");
+      button.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    }
+    this.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    void this.offsetHeight;
+    this.style.display = "none";
+    this.querySelector(SEL_CONTAINER)?.remove();
+  }
   /** Returns `true` (hide) when Apple Pay is unavailable on this device/browser. */
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2231,8 +2245,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #checkSession() {
     this.#sessionData = await this.#fetchSession();
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2240,8 +2253,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2268,8 +2280,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.options?.apple_pay) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;

package/dist/src/apple-pay-modal.stories.js

@@ -2200,18 +2200,32 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       if (await this.#fetchAndCacheOptions()) return;
       this.#finishLoading();
     } catch {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
     } finally {
       this.#rendering = false;
     }
   }
+  /**
+   * Stop the loading spinner before tear-down so Safari does not leave a GPU
+   * ghost of `.apple-pay-btn.wap-loading::before` after the container is removed.
+   */
+  #hide() {
+    const button = this.querySelector(SEL_BUTTON);
+    if (button) {
+      button.classList.remove("wap-loading");
+      button.removeAttribute("aria-busy");
+      button.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    }
+    this.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    void this.offsetHeight;
+    this.style.display = "none";
+    this.querySelector(SEL_CONTAINER)?.remove();
+  }
   /** Returns `true` (hide) when Apple Pay is unavailable on this device/browser. */
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2223,8 +2237,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #checkSession() {
     this.#sessionData = await this.#fetchSession();
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2232,8 +2245,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2260,8 +2272,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.options?.apple_pay) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;

package/dist/src/index.js

@@ -2211,18 +2211,32 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       if (await this.#fetchAndCacheOptions()) return;
       this.#finishLoading();
     } catch {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
     } finally {
       this.#rendering = false;
     }
   }
+  /**
+   * Stop the loading spinner before tear-down so Safari does not leave a GPU
+   * ghost of `.apple-pay-btn.wap-loading::before` after the container is removed.
+   */
+  #hide() {
+    const button = this.querySelector(SEL_BUTTON);
+    if (button) {
+      button.classList.remove("wap-loading");
+      button.removeAttribute("aria-busy");
+      button.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    }
+    this.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    void this.offsetHeight;
+    this.style.display = "none";
+    this.querySelector(SEL_CONTAINER)?.remove();
+  }
   /** Returns `true` (hide) when Apple Pay is unavailable on this device/browser. */
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2234,8 +2248,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #checkSession() {
     this.#sessionData = await this.#fetchSession();
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2243,8 +2256,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2271,8 +2283,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.options?.apple_pay) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@economist/web-apple-pay",
   "description": "Web component package for Apple Pay checkout UI",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",