Add transition on layout instead of on each single page

frontend/src/routes/+layout.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
 	import BottomAppBar from '$lib/components/BottomAppBar.svelte';
-	// import Toast from '$lib/components/Toast.svelte';
-	// import { onMount } from 'svelte';
+	import Toast from '$lib/components/Toast.svelte';
+	import { onMount } from 'svelte';
 
-	let node;
+	let node: HTMLElement;
 
-	/**
 	onMount(() => {
 		if(import.meta.env.DEV) return; 
 		
@@ -17,22 +16,30 @@
 			if (BroadcastChannel) {
 				const channel = new BroadcastChannel('sw-messages');
 				channel.addEventListener('message', (event) => {
-					console.log(event.data);
 					new Toast({ target: node });
 				});
 			} else {
 				navigator.serviceWorker.addEventListener('message', (evt) => {
-					console.log(evt.data);
 					new Toast({ target: node });
 				});
 			}
 
 			navigator.serviceWorker.ready.then((registration) => {
-				registration.active.postMessage('Save client');
+				registration?.active?.postMessage('Save client');
 			});
 		}
 	});
-	*/
+
+	onNavigate((navigation: { complete: any; }) => {
+		if (!(document.startViewTransition)) return;
+
+		return new Promise<void>((resolve) => {
+			document?.startViewTransition(async () => {
+				resolve();
+				await navigation.complete;
+			});
+		});
+	});
 </script>
 
 <div bind:this={node}></div>

frontend/src/routes/+page.svelte

@@ -1,22 +1,9 @@
 <script lang="ts">
 	import Path from '$lib/components/Path.svelte';
 	import Splash from '$lib/components/Splash.svelte';
-	import { onNavigate } from '$app/navigation';
 
 	export let data;
 	let categories = data.categories;
-
-	onNavigate((navigation) => {
-		if (!document.startViewTransition) return;
-
-		return new Promise((resolve) => {
-			document.startViewTransition(async () => {
-				resolve();
-				await navigation.complete;
-			});
-		});
-	});
-
 </script>
 
 <Splash />

frontend/src/routes/paths/[slug]/+page.svelte

@@ -1,19 +1,7 @@
 <script lang="ts">
 	import Route from '$lib/components/Route.svelte';
 	import HomeHeader from '$lib/components/HomeHeader.svelte';
-	import { onNavigate } from '$app/navigation';
-
-	onNavigate((navigation) => {
-		if (!document.startViewTransition) return;
-
-		return new Promise((resolve) => {
-			document.startViewTransition(async () => {
-				resolve();
-				await navigation.complete;
-			});
-		});
-	});
-
+	
 	export let data;
 </script>
 

frontend/src/routes/routes/[slug]/+page.svelte

@@ -1,22 +1,9 @@
 <script lang="ts">
 	import Header from '$lib/components/Header.svelte';
 	import Tabs from '$lib/components/Tabs.svelte';
-	import { onNavigate } from '$app/navigation';
 
 	export let data: App.Route;
 
-	onNavigate((navigation) => {
-		if (!document.startViewTransition) return;
-
-		return new Promise((resolve) => {
-			document.startViewTransition(async () => {
-				resolve();
-				await navigation.complete;
-			});
-		});
-	});
-
-
 	let divider;
 
     const mapClick = () => {};