frontend/src/routes/+layout.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import BottomAppBar from '$lib/components/BottomAppBar.svelte';
-	import Toast from '$lib/components/Toast.svelte';
+	// import Toast from '$lib/components/Toast.svelte';
-	import { onMount } from 'svelte';
+	// import { onMount } from 'svelte';
 
-	let node: HTMLElement;
+	let node;
 
+	/**
 	onMount(() => {
 		if(import.meta.env.DEV) return; 
 		
@@ -16,30 +17,22 @@
 			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,9 +1,22 @@
 <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,6 +1,18 @@
 <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,9 +1,22 @@
 <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 = () => {};