Sapper: [Feature Request] use progress bar for page transitions

Created on 29 Oct 2019  路  8Comments  路  Source: sveltejs/sapper

Is your feature request related to a problem? Please describe.
sapper sites with big json chunks take a while to navigate. so when you click a link it doesnt feel responsive.

Describe the solution you'd like
add some sort of loading progress bar like nprogress by default in the generated client app. ofc you're free to disable it.

Describe alternatives you've considered
no change?

How important is this feature to you?
moderately. i feel it is important for both static export and server rendering to feel fast, and we want to promote this as a default for sapper.

if this is something inline with the project i'd be happy to work on it myself.

proposal

Most helpful comment

It's already possible to show a page loading state. The most simple form is something like:

<script>
  import { stores } from '@sapper/app';

  const { preloading } = stores();
</script>

{#if $preloading}
  <div id="loading"></div>
{/if}

You could use $preloading to control NProgress.

All 8 comments

It's already possible to show a page loading state. The most simple form is something like:

<script>
  import { stores } from '@sapper/app';

  const { preloading } = stores();
</script>

{#if $preloading}
  <div id="loading"></div>
{/if}

You could use $preloading to control NProgress.

Is this more relevant to the sapper-template repo? I think this would be a change over there unless I misunderstand the issue.

happy to move it!

I think simply exposing progress from the '@sapper/app' stores would be ideal. I would usually want to customize the progress bar rather than using NProgress out of the box

@sw-yx this seems like a very custom sort of thing to have built in. Like @pngwn said, if we're going to put it anywhere, it would be probably be in sapper-template, so feel free to open an issue there. Closing here since this isn't the place.

@arxpoetica would you be open to a new sapper issue about exporting preloading progress from @sapper/app? Using something like ReadableStream? This is the platform feature necessary to implement a proper progress bar in userland.

i'll be honest i never figured out how to do it. would love a recipe.

afaik, getting any sort of progress updates is impossible when using the Fetch API for requests. Whether it makes sense to completely redo how preload works (including breaking changes for people using Sapper) so that we can get progress updates is a question I don't have the answer to, but given the lack of resources available for Sapper currently I would guess it doesn't.

Was this page helpful?
0 / 5 - 0 ratings