michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix race condition when performing swap for fallback (#7945)

Browse source 
* Fix race condition when performing swap for fallback

* Adding a changeset

* Use let
This commit is contained in:
Matthew Phillips 2023-08-04 08:48:11 -04:00 committed by GitHub
parent 9b1de49075
commit a00cfb8942
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/cold-maps-report.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix race condition when performing swap for fallback

11
packages/astro/components/ViewTransitions.astro
View file

@ -168,13 +168,18 @@ const { fallback = 'animate' } = Astro.props as Props;
// Trigger the animations // Trigger the animations
document.documentElement.dataset.astroTransitionFallback = 'old'; document.documentElement.dataset.astroTransitionFallback = 'old';
doc.documentElement.dataset.astroTransitionFallback = 'new'; const fallbackSwap = () => {
removeEventListener('animationend', fallbackSwap);
clearTimeout(timeout);
swap();
document.documentElement.dataset.astroTransitionFallback = 'new';
};
// If there are any animations, want for the animationend event. // If there are any animations, want for the animationend event.
addEventListener('animationend', swap, { once: true }); addEventListener('animationend', fallbackSwap, { once: true });
// If there are no animations, go ahead and swap on next tick // If there are no animations, go ahead and swap on next tick
// This is necessary because we do not know if there are animations. // This is necessary because we do not know if there are animations.
// The setTimeout is a fallback in case there are none. // The setTimeout is a fallback in case there are none.
setTimeout(() => !isAnimating && swap()); let timeout = setTimeout(() => !isAnimating && fallbackSwap());
} else { } else {
swap(); swap();
} }