pinafore/routes/_components/TimelinePage.html

<div class="timeline-page" aria-busy={hideTimeline}>
  {#if hidePage}
    <LoadingPage />
  {/if}
  <div class="timeline-slot-reveal-container {hidePage ? 'hidden' : ''}">
    <slot></slot>
  </div>
  <div class="timeline-anchor-container">
    {#if !hidePage && hideTimeline}
      <LoadingPage />
    {/if}
    <div class="timeline-reveal-container {hideTimeline ? 'hidden' : ''}">
      <LazyTimeline {timeline} />
    </div>
  </div>
</div>
<style>
  .timeline-page, .timeline-anchor-container {
    position: relative;
  }
  .timeline-reveal-container, .timeline-slot-reveal-container {
    transition: opacity 0.2s linear; /* main page reveal */
  }
</style>
<script>
  import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
  import { store } from '.././_store/store.js'
  import LoadingPage from '../_components/LoadingPage.html'

  export default {
    oncreate () {
      this.store.set({
        timelineInitialized: false,
        timelinePreinitialized: false
      })
    },
    computed: {
      hidePage: ({ $timelineInitialized, $timelinePreinitialized }) => !$timelineInitialized && !$timelinePreinitialized,
      hideTimeline: ({ $timelineInitialized }) => !$timelineInitialized
    },
    store: () => store,
    components: {
      LazyTimeline,
      LoadingPage
    }
  }
</script>