From 9afab3cf44afbf80069c285e04a65c5e53ca24f8 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Sun, 19 Mar 2023 14:53:18 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Add=20route=20transitio?=
 =?UTF-8?q?ns.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/transition.svelte | 10 ++++++++++
 src/routes/+layout.server.ts     |  5 +++++
 src/routes/+layout.svelte        | 14 ++++++++++----
 3 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 src/components/transition.svelte
 create mode 100644 src/routes/+layout.server.ts

diff --git a/src/components/transition.svelte b/src/components/transition.svelte
new file mode 100644
index 0000000..0042710
--- /dev/null
+++ b/src/components/transition.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  export let pathname: string = '';
+</script>
+
+{#key pathname}
+  <div in:fade={{ duration: 300 }}>
+    <slot />
+  </div>
+{/key}
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
new file mode 100644
index 0000000..38695c6
--- /dev/null
+++ b/src/routes/+layout.server.ts
@@ -0,0 +1,5 @@
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async ({ url: { pathname } }) => {
+  return { pathname };
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d1ead55..0a75562 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
+  import type { LayoutServerData } from './$types';
+  export let data: LayoutServerData;
+
   // Global styles:
   import '../app.css';
 
   // Get categories:
-  import svgData from '../data/svgs.json';
-  const categories = svgData
+  import { svgs } from '@/data/svgs';
+  const categories = svgs
     .map((svg) => svg.category)
     .filter((category, index, array) => array.indexOf(category) === index);
 
@@ -14,6 +17,7 @@
 
   // Toaster:
   import { Toaster } from 'svelte-french-toast';
+  import Transition from '@/components/transition.svelte';
 </script>
 
 <main class="min-h-screen bg-dark font-sans text-mini text-white">
@@ -33,7 +37,7 @@
           <a
             href={`/directory/${category.toLowerCase()}`}
             class="flex w-full items-center rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
-            >{category}</a
+            data-sveltekit-preload-data>{category}</a
           >
         {/each}
       </div>
@@ -69,7 +73,9 @@
     </div>
   </nav>
   <div class="ml-60 py-6">
-    <slot />
+    <Transition pathname={data.pathname}>
+      <slot />
+    </Transition>
     <Toaster position="bottom-center" />
   </div>
 </main>