From 564ce2f84b05b0ad6300ea501e062aa390a2b594 Mon Sep 17 00:00:00 2001
From: Jakob Rosenberg <jakobrosenberg@gmail.com>
Date: Thu, 6 Jul 2023 17:55:53 +0200
Subject: [PATCH] update data fetching example in starter-basic

---
 .../[mode]/__components/Spinner.svelte        | 17 ++++++++++
 .../[mode]/data-fetching/__spinner.svelte     | 31 +++++++++++++++++++
 .../[mode]/data-fetching/_module.svelte       |  4 ++-
 .../examples/[mode]/data-fetching/data.svelte |  4 ++-
 .../examples/[mode]/data-fetching/index.md    |  3 --
 .../[mode]/data-fetching/index.svelte         | 15 +++++++++
 .../[mode]/landing-page/_module.svelte        |  1 +
 7 files changed, 70 insertions(+), 5 deletions(-)
 create mode 100644 examples/starter-basic/src/routes/examples/[mode]/__components/Spinner.svelte
 create mode 100644 examples/starter-basic/src/routes/examples/[mode]/data-fetching/__spinner.svelte
 delete mode 100644 examples/starter-basic/src/routes/examples/[mode]/data-fetching/index.md
 create mode 100644 examples/starter-basic/src/routes/examples/[mode]/data-fetching/index.svelte

diff --git a/examples/starter-basic/src/routes/examples/[mode]/__components/Spinner.svelte b/examples/starter-basic/src/routes/examples/[mode]/__components/Spinner.svelte
new file mode 100644
index 00000000..6307039c
--- /dev/null
+++ b/examples/starter-basic/src/routes/examples/[mode]/__components/Spinner.svelte
@@ -0,0 +1,17 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+    ><style>
+        .spinner_ajPY {
+            transform-origin: center;
+            animation: spinner_AtaB 0.75s infinite linear;
+        }
+        @keyframes spinner_AtaB {
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+    </style><path
+        d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+        opacity=".25" /><path
+        d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+        class="spinner_ajPY"
+        id="foo" /></svg>
diff --git a/examples/starter-basic/src/routes/examples/[mode]/data-fetching/__spinner.svelte b/examples/starter-basic/src/routes/examples/[mode]/data-fetching/__spinner.svelte
new file mode 100644
index 00000000..e4e1fbb6
--- /dev/null
+++ b/examples/starter-basic/src/routes/examples/[mode]/data-fetching/__spinner.svelte
@@ -0,0 +1,31 @@
+<script>
+    import { pendingRoute } from '@roxi/routify'
+    import Spinner from '../__components/Spinner.svelte'
+</script>
+
+{#if $pendingRoute}
+    <div class="spinner-wrapper">
+        <div class="spinner-overlay" />
+        <Spinner />
+    </div>
+{/if}
+
+<style>
+    .spinner-wrapper {
+        position: fixed;
+        inset: 0;
+        display: grid;
+        place-items: center;
+    }
+    .spinner-wrapper > :global(svg) {
+        position: relative;
+        width: 15vw;
+    }
+    .spinner-overlay {
+        position: absolute;
+        inset: 0;
+        background: var(--surface-1);
+        opacity: 0.7;
+        pointer-events: none;
+    }
+</style>
diff --git a/examples/starter-basic/src/routes/examples/[mode]/data-fetching/_module.svelte b/examples/starter-basic/src/routes/examples/[mode]/data-fetching/_module.svelte
index debae17b..5c4a33e5 100644
--- a/examples/starter-basic/src/routes/examples/[mode]/data-fetching/_module.svelte
+++ b/examples/starter-basic/src/routes/examples/[mode]/data-fetching/_module.svelte
@@ -1,6 +1,7 @@
 <script>
     import { url, context } from '@roxi/routify'
     import Nav from '@/components/Nav.svelte'
+    import Spinner from './__spinner.svelte'
 </script>
 
 <div class="app">
@@ -16,6 +17,7 @@
     <main>
         <slot />
     </main>
+    <Spinner />
 </div>
 
-<!-- routify:meta description="Fetch data with the <code>load</code> hook before component render." -->
\ No newline at end of file
+<!-- routify:meta description="Fetch data with the <code>load</code> hook before component render." -->
diff --git a/examples/starter-basic/src/routes/examples/[mode]/data-fetching/data.svelte b/examples/starter-basic/src/routes/examples/[mode]/data-fetching/data.svelte
index 9833b65f..fb0ffd41 100644
--- a/examples/starter-basic/src/routes/examples/[mode]/data-fetching/data.svelte
+++ b/examples/starter-basic/src/routes/examples/[mode]/data-fetching/data.svelte
@@ -1,9 +1,11 @@
 <script context="module">
-
     /**
      *  The "load" hook in Routify runs before a component loads and can return data via a "props" object.
      *  @param {RoutifyLoadContext} ctx */
     export const load = async ({ fetch }) => {
+        // let's simulate a slow network
+        await new Promise(resolve => setTimeout(resolve, 500))
+
         return {
             props: {
                 luke: await fetch('https://swapi.dev/api/people/1').then(res =>
diff --git a/examples/starter-basic/src/routes/examples/[mode]/data-fetching/index.md b/examples/starter-basic/src/routes/examples/[mode]/data-fetching/index.md
deleted file mode 100644
index 4bdef5ce..00000000
--- a/examples/starter-basic/src/routes/examples/[mode]/data-fetching/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-This example demonstrates how to utilize the `load` hook to fetch and return data via a "props" object.
-
-Navigate to data.svelte to see how we retrieve data from a Star Wars API and make it accessible for our component.
\ No newline at end of file
diff --git a/examples/starter-basic/src/routes/examples/[mode]/data-fetching/index.svelte b/examples/starter-basic/src/routes/examples/[mode]/data-fetching/index.svelte
new file mode 100644
index 00000000..94b668f8
--- /dev/null
+++ b/examples/starter-basic/src/routes/examples/[mode]/data-fetching/index.svelte
@@ -0,0 +1,15 @@
+<script>
+    import { url } from '@roxi/routify'
+</script>
+
+<p>
+    This example demonstrates how to utilize the `load` hook to fetch and return data via
+    a
+</p>
+
+<p>
+    "props" object. Navigate to data.svelte to see how we retrieve data from a Star Wars
+    API and make it accessible for our component.
+</p>
+
+<a href="../data" use:$url data-routify-prefetch-data="hover">prefetch data on hover</a>
diff --git a/examples/starter-basic/src/routes/examples/[mode]/landing-page/_module.svelte b/examples/starter-basic/src/routes/examples/[mode]/landing-page/_module.svelte
index 05cd160c..429eee50 100644
--- a/examples/starter-basic/src/routes/examples/[mode]/landing-page/_module.svelte
+++ b/examples/starter-basic/src/routes/examples/[mode]/landing-page/_module.svelte
@@ -15,6 +15,7 @@
         </nav>
     </header>
     <main>
+        <!-- set recursive to false to make sure the decorator is only used on the child component and not its descendants -->
         <slot decorator={{ component: LandingPageSection, recursive: false }} />
     </main>
 </div>