Load user data about svelte-spa-router HOT 4 OPEN

<!-- App.svelte -->
<script>
  import Router from 'svelte-spa-router';
  import wrap from "svelte-spa-router/wrap.js";
  import Loading from './Loading.svelte';
  import Product from './Product.svelte';

  async function sleep(time) {
    return await new Promise(res => setTimeout(res, time));
  }

  function logEvent(event) {
    console.log(event.type, event.detail);
  }

  let routes = {
    "/product/:id": wrap({
      component: Product,
      loadingComponent: Loading,
      conditions: [
        async (detail) => {
          console.log("condition1", detail);
          await sleep(1000); // fake delay
          return true;
        }
      ],
      props: {
        product: async (detail) => {
          console.log("Loading product", detail);
          await sleep(1000); // fake delay
          return {
            name: `Product ${detail?.params?.id}`
          }
        }
      }
    })
  }
</script>
<Router {routes}
  on:conditionsFailed={logEvent}
  on:routeLoading={logEvent}
  on:routeLoaded={logEvent}
  />

<!-- Loading.svelte -->
<div>Loading ...</div>

<!-- Product.svelte -->
<script>
  export let product = {};
</script>
<div>Name: {product.name}</div>