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