<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 './timeline/LazyTimeline.html' import { store } from '../_store/store.js' import LoadingPage from './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>