semaphore/routes/_components/LazyPage.html

{#if revealed}
  <svelte:component this={pageComponent} {params} />
{/if}
<script>
  // On the very first page load, avoid doing a "reveal" because
  // it leads to a flash between when the SSR is shown, the two frame we hide it,
  // and then when we show it again.
  //
  // We only really need LazyPage behavior when the user is clicking around
  // after the page has loaded, to improve input responsiveness.
  let firstTime = true

  export default {
    oncreate () {
      firstTime = false
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          this.set({revealed: true})
        })
      })
    },
    data: () => ({
      revealed: !process.browser || firstTime
    })
  }
</script>