Enable view transition on navigation

Author: PascalHonegger

package.json

@@ -20,6 +20,7 @@
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.0.6",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
+		"@types/dom-view-transitions": "^1.0.4",
 		"@typescript-eslint/eslint-plugin": "^6.16.0",
 		"@typescript-eslint/parser": "^6.16.0",
 		"autoprefixer": "^10.4.16",

pnpm-lock.yaml

@@ -1,6 +1,18 @@
 <script lang="ts">
-    import '../app.postcss';
-    import Header from '$lib/Header/index.svelte';
+	import '../app.postcss';
+	import Header from '$lib/Header/index.svelte';
+	import { onNavigate } from '$app/navigation';
+
+	onNavigate((navigation) => {
+		if (!document.startViewTransition) return;
+
+		return new Promise((resolve) => {
+			document.startViewTransition(async () => {
+				resolve();
+				await navigation.complete;
+			});
+		});
+	});
 </script>
 
 <Header />