fix loading spinner

This commit is contained in:
Nolan Lawson 2018-01-30 22:21:31 -08:00
parent f015e0e2a9
commit cb91271e23
2 changed files with 23 additions and 31 deletions

View file

@ -1,12 +1,5 @@
<div class="lazy-timeline">
{{#if !$initialized}}
<!-- <div transition:fade> -->
<div class="loading-page">
<LoadingSpinner />
</div>
<!-- </div> -->
{{/if}}
{{#await promise}}
{{#await importTimeline}}
{{then constructor}}
<:Component {constructor} :timeline />
{{catch error}}
@ -18,23 +11,9 @@
width: 100%;
min-height: 60vh;
}
.loading-page {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
}
</style>
<script>
import { importTimeline } from '../../_utils/asyncModules'
import LoadingSpinner from '../LoadingSpinner.html'
// TODO: the transition seems to occasionally cause an error in Svelte, transition_run is undefined
//import { fade } from 'svelte-transitions'
import { store } from '../../_store/store'
export default {
@ -46,13 +25,7 @@
},
store: () => store,
data: () => ({
promise: importTimeline()
}),
components: {
LoadingSpinner
}/*,
transitions: {
fade
}*/
importTimeline: importTimeline()
})
}
</script>

View file

@ -1,4 +1,9 @@
<div class="timeline" role="feed" aria-label="{{label}}">
{{#if !$initialized}}
<div class="loading-page">
<LoadingSpinner />
</div>
{{/if}}
{{#if virtual}}
<VirtualList component="{{StatusVirtualListItem}}"
:makeProps
@ -26,6 +31,18 @@
<style>
.timeline {
min-height: 60vh;
position: relative;
}
.loading-page {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
}
</style>
<script>
@ -38,6 +55,7 @@
import { timelines } from '../../_static/timelines'
import { database } from '../../_utils/database/database'
import { initializeTimeline, fetchStatusesOnScrollToBottom, setupTimeline } from '../../_actions/timeline'
import LoadingSpinner from '../LoadingSpinner.html'
export default {
async oncreate() {
@ -82,7 +100,8 @@
store: () => store,
components: {
VirtualList,
PseudoVirtualList
PseudoVirtualList,
LoadingSpinner
},
methods: {
initialize() {