perf: lazy-load the ComposeBox (#1262)

This commit is contained in:
Nolan Lawson 2019-06-01 17:01:50 -07:00 committed by GitHub
parent d75507bbce
commit 58a8772edc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 4 deletions

View file

@ -7,7 +7,7 @@
{#if hidePage}
<LoadingPage />
{/if}
<ComposeBox realm="home" hidden={hidePage}/>
<LazyComposeBox realm="home" hidden={hidePage}/>
<div class="timeline-home-anchor-container">
{#if !hidePage && hideTimeline}
<LoadingPage />
@ -29,7 +29,7 @@
import LazyTimeline from './timeline/LazyTimeline.html'
import { store } from '../_store/store.js'
import LoadingPage from './LoadingPage.html'
import ComposeBox from './compose/ComposeBox.html'
import LazyComposeBox from './compose/LazyComposeBox.html'
export default {
oncreate () {
@ -44,9 +44,9 @@
},
store: () => store,
components: {
LazyComposeBox,
LazyTimeline,
LoadingPage,
ComposeBox
LoadingPage
}
}
</script>

View file

@ -0,0 +1,16 @@
{#await importComposeBox}
<!-- awaiting promise -->
{:then ComposeBox}
<svelte:component this={ComposeBox} {realm} {hidden} />
{:catch error}
<div>Component failed to load. Try refreshing! {error}</div>
{/await}
<script>
import { importComposeBox } from '../../_utils/asyncModules'
export default {
data: () => ({
importComposeBox: importComposeBox()
})
}
</script>

View file

@ -43,3 +43,7 @@ export const importToast = () => import(
export const importSnackbar = () => import(
/* webpackChunkName: 'Snackbar.html' */ '../_components/snackbar/Snackbar.html'
).then(getDefault)
export const importComposeBox = () => import(
/* webpackChunkName: 'ComposeBox.html' */ '../_components/compose/ComposeBox.html'
).then(getDefault)