From 4dffc731b6b75f2a7f804db4424941e8f36aaeaf Mon Sep 17 00:00:00 2001
From: Alessio Davoli <davoli.alessio@webdeploy.it>
Date: Tue, 12 Dec 2023 16:57:28 +0100
Subject: [PATCH] Add transition on layout instead of on each single page

---
 frontend/src/routes/+layout.svelte             | 11 +++++++++++
 frontend/src/routes/+page.svelte               | 13 -------------
 frontend/src/routes/paths/[slug]/+page.svelte  | 14 +-------------
 frontend/src/routes/routes/[slug]/+page.svelte | 13 -------------
 4 files changed, 12 insertions(+), 39 deletions(-)

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index b0605de..e5f6c47 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -29,6 +29,17 @@
 			});
 		}
 	});
+
+	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>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 8503e5b..d0af4ef 100644
--- a/frontend/src/routes/+page.svelte
+++ b/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 />
diff --git a/frontend/src/routes/paths/[slug]/+page.svelte b/frontend/src/routes/paths/[slug]/+page.svelte
index b3f605e..69f1469 100644
--- a/frontend/src/routes/paths/[slug]/+page.svelte
+++ b/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>
 
diff --git a/frontend/src/routes/routes/[slug]/+page.svelte b/frontend/src/routes/routes/[slug]/+page.svelte
index 020665c..a387a50 100644
--- a/frontend/src/routes/routes/[slug]/+page.svelte
+++ b/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 = () => {};