From b8f6ee3a73460892a5fe5c17eba6eca61ec7660f Mon Sep 17 00:00:00 2001
From: David-Emmanuel DIVERNOIS <david-emmanuel.divernois@amadeus.com>
Date: Thu, 14 Nov 2024 16:26:18 +0100
Subject: [PATCH] fix: improve determinism in transition stores

---
 .../src/services/transitions/baseTransitions.ts | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/core/src/services/transitions/baseTransitions.ts b/core/src/services/transitions/baseTransitions.ts
index 08e403d2ca..66b8b8c8a4 100644
--- a/core/src/services/transitions/baseTransitions.ts
+++ b/core/src/services/transitions/baseTransitions.ts
@@ -239,7 +239,6 @@ export const createTransition = (config?: PropsConfig<TransitionProps>): Transit
 			promise: Promise<void>;
 		},
 	);
-	const transitioning$ = computed(() => !!currentTransition$());
 	const stop = () => {
 		let context: object | undefined;
 		currentTransition$.update((currentTransition) => {
@@ -283,10 +282,7 @@ export const createTransition = (config?: PropsConfig<TransitionProps>): Transit
 			return currentTransition;
 		});
 
-	const shown$ = computed(() => !transitioning$() && visible$() && elementPresent$());
-	const hidden$ = computed(() => !transitioning$() && !visible$());
 	const effectiveAnimation$ = computed(() => (initDone$() ? animated$() : animatedOnInit$()));
-
 	const animationFromToggle$ = writable(null as null | boolean);
 	let previousElement: SSRHTMLElement | null;
 	let previousVisible = requestedVisible$();
@@ -355,6 +351,19 @@ export const createTransition = (config?: PropsConfig<TransitionProps>): Transit
 		}
 	};
 
+	const transitioning$ = computed(() => {
+		if (elementPresent$()) {
+			// if the element is present, visibleAction$ can start a transition,
+			// so it must be updated before currentTransition$ is checked
+			// so that we don't have an intermediate state
+			// where transitioning$ is false just before it becomes true
+			void visibleAction$();
+		}
+		return !!currentTransition$();
+	});
+	const shown$ = computed(() => !transitioning$() && visible$() && elementPresent$());
+	const hidden$ = computed(() => !transitioning$() && !visible$());
+
 	const directive = mergeDirectives(storeDirective, directiveSubscribe(visibleAction$));
 
 	return {