update data fetching example in starter-basic

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>

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>

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." -->
+<!-- routify:meta description="Fetch data with the <code>load</code> hook before component render." -->

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 =>

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>

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>