diff --git a/ts/components/Collapsible.svelte b/ts/components/Collapsible.svelte index 0e8e3c0e2..b09cd53b5 100644 --- a/ts/components/Collapsible.svelte +++ b/ts/components/Collapsible.svelte @@ -16,11 +16,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html function dynamicDuration(height: number): number { return 100 + Math.pow(height, 1 / 4) * 25; } - $: duration = dynamicDuration(contentHeight); + // If we don't transition, the editor actually takes considerably longer to create all + // the fields. Because of that, we're using an imperceptible duration for the animation + // when reduced motion is enabled. + $: duration = animated ? dynamicDuration(contentHeight) : 0.01; const size = tweened(0); async function transition(collapse: boolean): Promise { + // We need to ensure collapsibleElement still exists + if (!collapsibleElement) { + return; + } + if (collapse) { contentHeight = collapsibleElement.clientHeight; size.set(0, { @@ -41,11 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } $: if (collapsibleElement) { - if (animated) { - transition(collapse); - } else { - collapsed = collapse; - } + window.requestAnimationFrame(() => transition(collapse)); } let collapsibleElement: HTMLElement; @@ -67,7 +71,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-{#if animated && measuring} +{#if measuring}
{/if}