#await block not working in Home.svelte

[charlesguse]

Hello! I assume it's a newbie mistake on my part but I can't seem to find an answer to this.

I am trying to use the await blocks functionality found here: https://svelte.dev/tutorial/await-blocks

I start with a new project: npx degit Elderjs/template elderjs-app

I then go into the <script> section of src/routes/home/Home.svelte and add the following:

<script>
  ...  // Excluding the imports and the hooks setup

  let i = 0;
  function sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }
  async function getRandomNumber() {
    await sleep(1000);
    return await i++;
  }

  let promise = getRandomNumber();

  function handleClick() {
    promise = getRandomNumber();
  }
</script>

I then add the following between the two divs for blog and about:

<div class="banner"> ... </div>

<button on:click={handleClick}> generate random number </button>

{#await promise}
  <p>...waiting</p>
{:then number}
  <p>The number is {number}</p>
{:catch error}
  <p style="color: red">{error.message}</p>
{/await}

<div class="blog"> ... </div>

When I run this locally or deploy it as a static site through cloudfront, neither work. The button exists, the <p>...waiting</p> is presented but it never updates to a number.

Am I doing something silly? If needed, I can create a public repo and static site to represent the issue I am referring to.

[charlesguse]

I went ahead and pushed an example github repo and deployed a site using S3 and CloudFront here: https://d2o9y0tp153pi1.cloudfront.net/

[nickreese]

Move the await block to a component and hydrate it. Route svelte files are SSR only.

[charlesguse]

Thank you! I was hoping it was as simple as me just not understanding something. Appreciate the help @nickreese!