Refactor transition code into root layout

Author: geoffrich

src/lib/utils/use-page-transition.js

@@ -1,17 +1,20 @@
 import { afterNavigate, beforeNavigate } from '$app/navigation';
 import { getTransitionContext } from '$lib/utils/resource-context';
-import { onDestroy } from 'svelte';
 
 // Call this hook on this first page before you start the page transition.
 // For Shared Element Transitions, you need to call the transition.start()
 // method before the next page begins to render, and you need to do the
 // Document Object Model (DOM) modification or setting of new shared
 // elements inside the callback so that this hook returns the promise and
 // defers to the callback resolve.
-export const prepareTransitionFromPage = () => {
+export const preparePageTransition = () => {
 	const transitionStore = getTransitionContext();
+	let unsub;
 
+	// before navigating, start a new transition
 	beforeNavigate(({ to }) => {
+		unsub?.();
+
 		// Feature detection
 		if (!document.createDocumentTransition) {
 			return;
@@ -32,16 +35,6 @@ export const prepareTransitionFromPage = () => {
 			}));
 		});
 	});
-};
-
-// Call this hook on the second page. Inside the useEffect hook, you can
-// refer to the actual DOM element and set them as shared elements with the
-// transition.setElement() method. When the resolver function is called,
-// the transition is initiated between the captured images and newly set
-// shared elements.
-export const prepareTransitionToPage = () => {
-	const transitionStore = getTransitionContext();
-	let unsub;
 
 	afterNavigate(({ to }) => {
 		const transitionKey = to.pathname;
@@ -54,8 +47,4 @@ export const prepareTransitionToPage = () => {
 			resolver();
 		});
 	});
-
-	onDestroy(() => {
-		unsub?.();
-	});
 };

src/routes/__layout.svelte

@@ -3,8 +3,10 @@
 	import Navbar from '$lib/Navbar.svelte';
 	import Footer from '$lib/Footer.svelte';
 	import { initTransitionContext } from '$lib/utils/resource-context';
+	import { preparePageTransition } from '$lib/utils/use-page-transition';
 
 	initTransitionContext();
+	preparePageTransition();
 </script>
 
 <Navbar />

src/routes/fruits/[name].svelte

@@ -5,13 +5,6 @@
 	export let nutrition;
 
 	import Nutrition from '$lib/Nutrition.svelte';
-	import {
-		prepareTransitionToPage,
-		prepareTransitionFromPage
-	} from '$lib/utils/use-page-transition';
-
-	prepareTransitionToPage();
-	prepareTransitionFromPage();
 </script>
 
 <svelte:head>

src/routes/fruits/index.svelte

@@ -2,13 +2,6 @@
 	export let items;
 
 	import ListItem from '$lib/ListItem.svelte';
-	import {
-		prepareTransitionFromPage,
-		prepareTransitionToPage
-	} from '$lib/utils/use-page-transition';
-
-	prepareTransitionFromPage();
-	prepareTransitionToPage();
 </script>
 
 <svelte:head>