Pinafore-Web-Client-Frontend/routes/_components/TimelineHomePage.html

54 lines
1.6 KiB
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>