Sapper: Show a loading indicator for slow pages

[BMorearty]

Is your feature request related to a problem? Please describe.
Even though Sapper is very fast, the preload function might call a slow API when fetching data. Since Sapper uses ajax to simulate page loads, the browser won’t show a loading indicator. To the user it looks like nothing is happening.

Describe the solution you'd like
When a page is taking a while to load, I'd like Sapper to show a (customizable) loading indicator. One way to do this would be to show it if the preload function returns a Promise.

turbolinks and GitHub (with pjax) both do this.

Describe alternatives you've considered
Instead of returning a Promise, my preload function could return { data: myPromise } and I could render my own loading indicator in the page. But I'd like it to be handled by the framework for me.

How important is this feature to you?
Low-medium. I don't have a real use case for it right now but would love to have it there for when I need it.

Additional context
You can test this out by adding this to the top of preload in src/routes/blog/[slug].svelte:

await new Promise(resolve => setTimeout(resolve, 2000));

[dimfeld]

I just do something like this in my _layout.svelte. This example triggers if preloading lasts longer than 250ms but you can change it around however you like.

<script>
  import { derived } from 'svelte/store';
  const { preloading } = stores();
  const delayedPreloading = derived(preloading, (currentPreloading, set) => {
    setTimeout(() => set(currentPreloading), 250);
  });
</script>

{#if $preloading && $delayedPreloading}
  <!-- Show Loading spinner -->
{/if}

<slot />

[Conduitry]

Yup, indeed you can already use the $preloading store for precisely this.

[BMorearty]

That’s great. Thank you.