From 33b8d1c30ad1019f263f5b359eeb1f96d4cf19f0 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Thu, 28 Aug 2025 10:19:51 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20ViewTransitions=20component?=
 =?UTF-8?q?=20to=20layout=20for=20improve=20navigation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/viewTransitions.svelte | 12 ++++++++++++
 src/routes/+layout.svelte             |  2 ++
 2 files changed, 14 insertions(+)
 create mode 100644 src/components/viewTransitions.svelte

diff --git a/src/components/viewTransitions.svelte b/src/components/viewTransitions.svelte
new file mode 100644
index 0000000..793404e
--- /dev/null
+++ b/src/components/viewTransitions.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { onNavigate } from "$app/navigation";
+  onNavigate((navigation) => {
+    if (!document.startViewTransition) return;
+    return new Promise((resolve) => {
+      document.startViewTransition(async () => {
+        resolve();
+        await navigation.complete;
+      });
+    });
+  });
+</script>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1311282..a3e4098 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,12 +10,14 @@
   // Providers:
   import { ModeWatcher } from "mode-watcher";
   import Sidebar from "@/components/layout/sidebar.svelte";
+  import ViewTransitions from "@/components/viewTransitions.svelte";
 
   // SSR Data:
   let { data, children }: LayoutProps = $props();
 </script>
 
 <ModeWatcher />
+<ViewTransitions />
 <Header githubStars={data?.stars} />
 <Sidebar>
   {@render children?.()}