pinafore/routes/_components/TimelineHomePage.html

<!--
     Same as TimelinePage.html, but needs to manage visibility of ComposeBox itself
     without a div wrapper due to sticky-positioned compose button.
     TODO: this is a bit hacky due to code duplication
 -->
<div class="timeline-home-page" aria-busy="{{hideTimeline}}">
  {{#if hidePage}}
    <LoadingPage />
  {{/if}}
  {{#if $currentVerifyCredentials }}
    <ComposeBox realm="home" hidden="{{hidePage}}"/>
  {{/if}}
  <div class="timeline-home-anchor-container">
    {{#if !hidePage && hideTimeline}}
      <LoadingPage />
    {{/if}}
    <div class="timeline-home-reveal-container {{hideTimeline ? 'hidden' : ''}}">
      <LazyTimeline timeline="home" />
    </div>
  </div>
</div>
<style>
  .timeline-home-page, .timeline-home-anchor-container {
    position: relative;
  }
  .timeline-home-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'
  import ComposeBox from '../_components/compose/ComposeBox.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,
      ComposeBox
    }
  }
</script>