pinafore/src/routes/_components/LazyPage.html

{#if revealed}
  <svelte:component this={pageComponent} {params} />
{/if}
<script>
  import { doubleRAF } from '../_utils/doubleRAF'
  // 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
      // Yes, triple raf. This is to ensure the NavItem animation plays before we
      // start rendering the new page.
      doubleRAF(() => requestAnimationFrame(() => this.set({ revealed: true })))
    },
    data: () => ({
      revealed: !process.browser || firstTime
    })
  }
</script>