From 699f4559a279b374bddb3e5e48c72afe2709e8e7 Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Mon, 15 Apr 2024 10:58:40 +0200
Subject: [PATCH] Make viewTransition.finished wait for animations triggered by
 viewTransition.ready (#10787)

---
 .changeset/stupid-countries-warn.md      | 5 +++++
 packages/astro/src/transitions/router.ts | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/stupid-countries-warn.md

diff --git a/.changeset/stupid-countries-warn.md b/.changeset/stupid-countries-warn.md
new file mode 100644
index 000000000000..27eeea281d4c
--- /dev/null
+++ b/.changeset/stupid-countries-warn.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes a timing issue in the view transition simulation.
diff --git a/packages/astro/src/transitions/router.ts b/packages/astro/src/transitions/router.ts
index 0084a9d74ea2..e65b613c93e1 100644
--- a/packages/astro/src/transitions/router.ts
+++ b/packages/astro/src/transitions/router.ts
@@ -396,8 +396,10 @@ async function updateDOM(
 			const style = window.getComputedStyle(effect.target, effect.pseudoElement);
 			return style.animationIterationCount === 'infinite';
 		}
-		// Trigger the animations
 		const currentAnimations = document.getAnimations();
+		// allow animations triggered by viewTransition.ready to start
+		await new Promise<void>((r)=>setTimeout(r));
+		// Trigger view transition animations waiting for data-astro-transition-fallback
 		document.documentElement.setAttribute(OLD_NEW_ATTR, phase);
 		const nextAnimations = document.getAnimations();
 		const newAnimations = nextAnimations.filter(