From 6286479aa65e753f4ffeb49c205f90d7a24c9a68 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Fri, 18 Aug 2023 11:03:38 +0200
Subject: [PATCH] feat: add transition to page routing

---
 src/routes/+layout.svelte | 11 ++++++++++-
 src/routes/+layout.ts     |  7 +++++++
 2 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/+layout.ts

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 75ffa5f..4f4f200 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,6 +7,11 @@
 	import Footer from '../lib/components/Footer.svelte';
 	import Navigation from '../lib/components/Navigation.svelte';
 	import Header from '$lib/components/Header.svelte';
+	import { fade } from 'svelte/transition';
+
+	export let data;
+
+	$: ({ pathname } = data);
 
 	import { dev } from '$app/environment';
 	import { inject } from '@vercel/analytics';
@@ -49,7 +54,11 @@
 		<Header {progress} />
 	</svelte:fragment>
 
-	<slot />
+	{#key pathname}
+		<div in:fade={{ duration: 300, delay: 400 }} out:fade={{ duration: 300 }}>
+			<slot />
+		</div>
+	{/key}
 
 	<svelte:fragment slot="pageFooter">
 		<Footer />
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
new file mode 100644
index 0000000..8290a93
--- /dev/null
+++ b/src/routes/+layout.ts
@@ -0,0 +1,7 @@
+export const load = ({ url }) => {
+	const { pathname } = url;
+
+	return {
+		pathname
+	};
+};