From 3f83a298831fd9389d76faf92d62a9add9df0f8b Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Wed, 13 Apr 2022 14:44:22 -0700
Subject: [PATCH] Adding link prefetching to nav and page transition on main
 home content.

---
 src/components/navigation.svelte |  8 ++++----
 src/components/transition.svelte | 13 +++++++++++++
 src/routes/home/__layout.svelte  | 11 +++++++----
 3 files changed, 24 insertions(+), 8 deletions(-)
 create mode 100644 src/components/transition.svelte

diff --git a/src/components/navigation.svelte b/src/components/navigation.svelte
index e3d12ce..d09867d 100644
--- a/src/components/navigation.svelte
+++ b/src/components/navigation.svelte
@@ -13,25 +13,25 @@
           <a href="/" class="logo">🐦️</a>
         </li>
         <li class:active={path === '/home'}>
-          <a href="/home">
+          <a href="/home" sveltekit:prefetch>
             <Icon width="32" height="32" name="home" />
             <span>Home</span>
           </a>
         </li>
 				<li class:active={path === '/home/profile/matia'}>
-          <a href="/home/profile/matia">
+          <a href="/home/profile/matia" sveltekit:prefetch>
             <Icon width="32" height="32" name="profile" />
             <span>Profile</span>
           </a>
         </li>
 				<li class:active={path === '/home/settings'}>
-          <a href="/home/settings">
+          <a href="/home/settings" sveltekit:prefetch>
             <Icon width="32" height="32" name="settings" />
             <span>Settings</span>
           </a>
         </li>
 				<li class:active={path === '/home/about'}>
-          <a href="/home/about">
+          <a href="/home/about" sveltekit:prefetch>
             <Icon width="32" height="32" name="about" />
             <span>About</span>
           </a>
diff --git a/src/components/transition.svelte b/src/components/transition.svelte
new file mode 100644
index 0000000..3cf7f6b
--- /dev/null
+++ b/src/components/transition.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition'
+  export let url: URL
+</script>
+
+{#key url}
+  <div
+    in:fly={{ y: -50, duration: 250, delay: 300 }}
+    out:fly={{ y: -50, duration: 250 }}
+  >
+    <slot />
+  </div>
+{/key}
\ No newline at end of file
diff --git a/src/routes/home/__layout.svelte b/src/routes/home/__layout.svelte
index 9f862c9..dbff4d3 100644
--- a/src/routes/home/__layout.svelte
+++ b/src/routes/home/__layout.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
-import Navigation from "$root/components/navigation.svelte";
-import Trending from "$root/components/trending.svelte";
-
+	import { page } from '$app/stores'
 
+	import Navigation from "$root/components/navigation.svelte"
+	import Transition from '$root/components/transition.svelte';
+	import Trending from "$root/components/trending.svelte"
 </script>
 
 <div class="container">
   <Navigation />
   <main class="feed">
-    <slot />
+		<Transition url={$page.url}>
+    	<slot />
+		</Transition>
   </main>
   <Trending />
 </div>