lazy load the timeline

This commit is contained in:
Nolan Lawson 2018-01-14 23:24:27 -08:00
parent 3b26a8bfe6
commit e3bb16b688
7 changed files with 91 additions and 50 deletions

View file

@ -0,0 +1,40 @@
{{#await promise}}
<div class="loading-page">
{{#if trueValue}} <!-- hack to get the transition to work -->
<div transition:fade>
<LoadingSpinner />
</div>
{{/if}}
</div>
{{then constructor}}
<:Component {constructor} :target />
{{catch error}}
<div>Component failed to load. Please try refreshing!</div>
{{/await}}
<style>
.loading-page {
width: 100%;
min-height: 40vh;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<script>
import { importTimeline } from '../_utils/asyncModules'
import LoadingSpinner from './LoadingSpinner.html'
import { fade } from 'svelte-transitions'
export default {
data: () => ({
promise: importTimeline(),
trueValue: true
}),
components: {
LoadingSpinner
},
transitions: {
fade
}
}
</script>

View file

@ -1,9 +1,7 @@
<div class="loading-container">
{{#if show}}
<div transition:fade class="loading-mask">
<svg>
<use xlink:href="#fa-spinner" />
</svg>
<LoadingSpinner maskStyle="true"/>
</div>
{{/if}}
</div>
@ -27,35 +25,17 @@
opacity: 0.6;
pointer-events: auto;
}
svg {
width: 64px;
height: 64px;
fill: var(--mask-svg-fill);
animation: spin 2s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script>
import { fade } from 'svelte-transitions'
import LoadingSpinner from './LoadingSpinner.html'
export default {
transitions: { fade }
transitions: {
fade
},
components: {
LoadingSpinner
}
}
</script>

View file

@ -0,0 +1,33 @@
<svg class="{{maskStyle ? 'mask-style' : ''}}">
<use xlink:href="#fa-spinner" />
</svg>
<style>
svg {
width: 64px;
height: 64px;
fill: var(--svg-fill);
animation: spin 2s infinite linear;
}
svg.mask-style {
fill: var(--mask-svg-fill);
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
</style>

After

Width:  |  Height:  |  Size: 543 B

View file

@ -21,24 +21,9 @@
import Status from './Status.html'
export default {
oncreate: async function () {
if (!process.browser) {
return
}
let instanceData = this.store.get('currentInstance')
if (!instanceData) {
return
}
let response = fixture
// let response = await (await getHomeTimeline(instanceData.instanceName, instanceData.access_token)).json()
if (process.env.NODE_ENV !== 'production') {
console.log(response)
}
this.set({'statuses': response})
},
data: () => ({
target: 'home',
statuses: []
statuses: fixture
}),
store: () => store,
components: {

View file

@ -59,8 +59,6 @@
}
})
},
ondestroy () {
},
data: () => ({
text: '',
shown: false,

View file

@ -13,7 +13,12 @@ const importToast = () => import(
/* webpackChunkName: 'toast' */ './toast'
).then(mod => mod.toast)
const importTimeline = () => import(
/* webpackChunkName: 'Timeline' */ '../_components/Timeline.html'
).then(mod => mod.default)
export {
importURLSearchParams,
importToast
importToast,
importTimeline
}

View file

@ -4,7 +4,7 @@
<Layout page='home'>
{{#if $isUserLoggedIn}}
<Timeline target='home' />
<LazyTimeline target='home' />
{{else}}
<NotLoggedInHome/>
{{/if}}
@ -14,14 +14,14 @@
<script>
import Layout from './_components/Layout.html'
import NotLoggedInHome from './_components/NotLoggedInHome.html'
import Timeline from './_components/Timeline.html'
import LazyTimeline from './_components/LazyTimeline.html'
import { store } from './_utils/store.js'
export default {
store: () => store,
components: {
Layout,
Timeline,
LazyTimeline,
NotLoggedInHome
}
}