Refactor view transition to use onNavigate

geoffrich · geoffrich · commit 21b0173cfcce · 2023-08-29T16:12:45.000-07:00
We can also preload data again since we don't have race conditions.
diff --git a/src/app.html b/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body>
+	<body data-sveltekit-preload-data="hover">
 		<div>%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/page-transition.js b/src/lib/page-transition.js
@@ -1,49 +1,16 @@
-import { beforeNavigate } from '$app/navigation';
-import { navigating } from '$app/stores';
-import { onDestroy } from 'svelte';
-
-function getNavigationStore() {
-	/** @type {((val?: any) => void)[]} */
-	let callbacks = [];
-
-	const navigation = {
-		...navigating,
-		complete: async () => {
-			await new Promise((res, _) => {
-				callbacks.push(res);
-			});
-		}
-	};
-
-	// This used to subscribe inside the callback, but that resolved the promise too early
-	const unsub = navigating.subscribe((n) => {
-		if (n === null) {
-			while (callbacks.length > 0) {
-				const res = callbacks.pop();
-				res?.();
-			}
-		}
-	});
-
-	onDestroy(() => {
-		unsub();
-	});
-
-	return navigation;
-}
+import { onNavigate } from '$app/navigation';
 
 export const preparePageTransition = () => {
-	const navigation = getNavigationStore();
-
-	// before navigating, start a new transition
-	beforeNavigate(() => {
+	onNavigate(async (navigation) => {
 		if (!document.startViewTransition) {
 			return;
 		}
-		const navigationComplete = navigation.complete();
 
-		document.startViewTransition(async () => {
-			await navigationComplete;
+		return new Promise((oldStateCaptureResolve) => {
+			document.startViewTransition(async () => {
+				oldStateCaptureResolve();
+				await navigation.complete;
+			});
 		});
 	});
 };
