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"> <div class="loading-container">
{{#if show}} {{#if show}}
<div transition:fade class="loading-mask"> <div transition:fade class="loading-mask">
<svg> <LoadingSpinner maskStyle="true"/>
<use xlink:href="#fa-spinner" />
</svg>
</div> </div>
{{/if}} {{/if}}
</div> </div>
@ -27,35 +25,17 @@
opacity: 0.6; opacity: 0.6;
pointer-events: auto; 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> </style>
<script> <script>
import { fade } from 'svelte-transitions' import { fade } from 'svelte-transitions'
import LoadingSpinner from './LoadingSpinner.html'
export default { export default {
transitions: { fade } transitions: {
fade
},
components: {
LoadingSpinner
}
} }
</script> </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' import Status from './Status.html'
export default { 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: () => ({ data: () => ({
target: 'home', target: 'home',
statuses: [] statuses: fixture
}), }),
store: () => store, store: () => store,
components: { components: {

View File

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

View File

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

View File

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