fix: wizard modal glitch

[peterpeterparker]

Motivation

The wizard modal opening is glitchy on desktop which really annoys me.

The problem

The wizard modal is glitchy because we noticed issue last year which we solved by wrapping the transition component within a if that became true only once the modal intro animation was done. This is the major root cause of the issue. Because the transition is not displayed, the slot it contains is not displayed and per extension the content is not displayed, therefore the height is not correct.

In addition to be glitchy, this is also an issue for the browser as if such guard is removed without further code, it can lead the browser to become irresponsive as the component transition ends in an infinite loop (⚠️ 🚨).

After opening and closing the modal a zillion times this afternoon I came to the conclusion that the root cause of the issue is the onDestroy side effect of the WizardModal that is sometimes not called when the modal is used in NNS-dapp.

This problem looks like the Svelte issue 👉 sveltejs/svelte#5268

To overcome the issue, I observed the nnsClose event of the modal and force not rendering its content when this happens which has for effect to destroy the transition ✅.

See screenshots for demos.

Changes

• in WizardModal, on nnsClose, set a flag to false to destroy / not render its content instead of waiting for introEnd
• remove the scale and replace with a fade effect

Screenshots

Current glitch:

Current glitch slowed down:

New animation effect without glitch:

Issue and infinite loop problem if only introEnd is removed:

No issue if nnsClose is used to force deletion of content (no infinite loop happening after a while):

[mstrasinskis]

LGTM, thank you!