<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>