Repository: svelte
Issue: Idle until urgent, what about a queue for improving render sense of speed?
Labels: perf,temp-stale

Dear @Rich-Harris your work with Svelte is amazing.
I consider you a genius and an innovator like _Leonardo Da Vinci_ or _Henry Ford_.
With **Svelte 3** you gave us a bit of that fresh air that we missed for so long.

So first of all I want to give you an immense and melodious thanks.

---

And now I would like your holy opinion about a doubt, a desire that has gripped me for a long time.

## **A DOUBT, A DESIRE**

Let's say I have a Svelte 3 SPA (single page application) and a router (svero, navaid, svelte-routing, universal or else).

When I move from one page to another Svelte is very fast, but when there are so many components I feel "the weight", "the slowness" of rendering the entire "page".

If I use the Chrome "Performance" tab > "CPU throttling" > "6x" or "4x" I can see a small, annoying "delay", "lag" before the new page rendering. All this without CSS or JS animations.

"Simply" the page is too full of components that are all needed.

And on those components mounting, there's a lot going on in background (query mostly and computation).

Those components are needed but aren't **immediately** needed.

What I need immediately _instead_ is the sense of speed of my SPA: to navigate from one page to another (_even if fake, empty_) must be fast!

An example (although not 100%) could be YouTube, which has done a good job on this.

What I'd like to have is:

- click from a page to another
- immediately render **first of all** the new page, even without any component and maybe just a text "Loading..."
- **and then** "slowly" render everything else

I tried something like this:

```html
<script>
  import { onMount } from "svelte";

  import { doQuery } from "../queries";

  let canRender = false;

  onMount(() => {
    setTimeout(() => {
      setTimeout(() => {
        canRender = true;
      });
    });
  });
</script>

<div>
  {#if canRender}
    {#await $doQuery}
      Loading...
    {:then result}
      {#each result as player}
        <div>{player.name}</div>
      {:else}
        No player
      {/each}
    {/await}
  {:else}
    Loading...
  {/if}
</div>
```

I tried also with `tick`:

```html
<script>
  import { onMount, tick } from "svelte";

  import { doQuery } from "../queries";

  let canRender = false;

  onMount(async () => {
    await tick();
    canRender = true;
  });
</script>

<div>
  {#if canRender}
    {#await $doQuery}
      Loading...
    {:then result}
      {#each result as player}
        <div>{player.name}</div>
      {:else}
        No player
      {/each}
    {/await}
  {:else}
    Loading...
  {/if}
</div>
```

But I don't know if I'm doing well.

And maybe now the problem is just "a tick" away from the first render and then all the renderings happen together at the same time again (am I wrong?).

Since Svelte is perfect I think there might be another different way to deal with this.

I read about:

- https://philipwalton.com/articles/idle-until-urgent/ and
- https://medium.com/@alexandereardon/dragging-react-performance-forward-688b30d40a33

Since your brain is among the most prosperous in the world, do you think it's possible to introduce something like an "idle-task-rendering-automagically-queue-for-components-and-navigation" in Svelte?

I obviously propose myself as an undying and immediate beta-tester and wiki-docs-writer.

Thanks again for your commitment.

---

This message is also addressed to people of very high value like @timhall, @jacwright and @lukeed.

Something wonderful can come from your minds.

Thanks to you too for all your wonderful work.