fix loading spinner
This commit is contained in:
parent
f015e0e2a9
commit
cb91271e23
|
@ -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>
|
|
@ -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() {
|
||||
|
|
Loading…
Reference in a new issue