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(); } /**