From 691fc0cadb68bcaf5a21a035e3a930a59f96bd48 Mon Sep 17 00:00:00 2001
From: fen4flo <75260616+FlorianButz@users.noreply.github.com>
Date: Fri, 10 Apr 2026 03:16:26 +0200
Subject: [PATCH] fix: Add changes to the zapping feature, c=boosts, b=no-bug
 (#13101)

I've added a fix for the zapping which will now only set the display to
none of a zapped element after the dissolve animation is fully complete.

I also plan on looking forward to fixing the color invalidation issue,
which is not done yet.
---
 src/zen/boosts/ZenZapDissolve.sys.mjs     | 11 ++++++++++-
 src/zen/boosts/ZenZapOverlayChild.sys.mjs | 16 ++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/zen/boosts/ZenZapDissolve.sys.mjs b/src/zen/boosts/ZenZapDissolve.sys.mjs
index 0bebcc352..25a2dd26d 100644
--- a/src/zen/boosts/ZenZapDissolve.sys.mjs
+++ b/src/zen/boosts/ZenZapDissolve.sys.mjs
@@ -154,6 +154,8 @@ void main() {
   #hasTriggered = false;
   #rafId = null;
 
+  #onComplete = null;
+
   /**
    * @param {Document} document Webpage document
    */
@@ -482,12 +484,14 @@ void main() {
    *
    * @param {Element} element The element to dissolve
    */
-  dissolve(element) {
+  dissolve(element, onComplete) {
     if (!this.#initialized || this.#hasTriggered || !element) {
       return;
     }
     this.#hasTriggered = true;
 
+    this.#onComplete = onComplete;
+
     const rect = element.getBoundingClientRect();
     if (rect.width === 0 || rect.height === 0) {
       console.warn("[ZapDissolve]: element has zero size. Skipping dissolve");
@@ -581,6 +585,11 @@ void main() {
       this.window.cancelAnimationFrame(this.#rafId);
       this.#rafId = null;
     }
+
+    if(this.#onComplete){
+      this.#onComplete();
+      this.#onComplete = null;
+    }
   }
 
   /**
diff --git a/src/zen/boosts/ZenZapOverlayChild.sys.mjs b/src/zen/boosts/ZenZapOverlayChild.sys.mjs
index 279266700..dc9ea7bec 100644
--- a/src/zen/boosts/ZenZapOverlayChild.sys.mjs
+++ b/src/zen/boosts/ZenZapOverlayChild.sys.mjs
@@ -192,13 +192,21 @@ export class ZapOverlay {
         counter++;
 
         this.#getNextDissolveEffect().then(dissolve => {
-          dissolve.dissolve(element);
+          dissolve.dissolve(element, () => {
+            this.zenBoostsChild.addZapSelector(cssPath);
+            this.onZapUpdate();
+
+            this.window.requestAnimationFrame(() => {
+              element.style.visibility = 'initial';
+            });
+          });
+          element.style.visibility = 'hidden';
         });
       });
+    } else {
+      this.zenBoostsChild.addZapSelector(cssPath);
+      this.onZapUpdate();
     }
-
-    this.zenBoostsChild.addZapSelector(cssPath);
-    this.onZapUpdate();
   }
 
   /**