async load PseudoVirtualList

This commit is contained in:
Nolan Lawson 2018-02-14 21:51:34 -08:00
parent 9ffd2a1d2d
commit 72e287acd0
2 changed files with 25 additions and 13 deletions

View file

@ -25,17 +25,23 @@
on:initializedVisibleItems="initialize()"
/>
{{else}}
<!-- if this is a status thread, it's easier to just render the
whole thing rather than use a virtual list -->
<PseudoVirtualList component="{{VirtualListComponent}}"
realm="{{$currentInstance + '/' + timeline}}"
containerQuery=".container"
:makeProps
items="{{$timelineItemIds}}"
shown="{{$initialized}}"
scrollToItem="{{scrollToItem}}"
on:initializedVisibleItems="initialize()"
/>
{{#await importPseudoVirtualList}}
{{then PseudoVirtualList}}
<!-- if this is a status thread, it's easier to just render the
whole thing rather than use a virtual list -->
<:Component {PseudoVirtualList}
component="{{VirtualListComponent}}"
realm="{{$currentInstance + '/' + timeline}}"
containerQuery=".container"
:makeProps
items="{{$timelineItemIds}}"
shown="{{$initialized}}"
scrollToItem="{{scrollToItem}}"
on:initializedVisibleItems="initialize()"
/>
{{catch error}}
<div>Component failed to load. Try refreshing! {{error}}</div>
{{/await}}
{{/if}}
</div>
<style>
@ -49,7 +55,6 @@
import StatusVirtualListItem from './StatusVirtualListItem.html'
import NotificationVirtualListItem from './NotificationVirtualListItem.html'
import Status from '../status/Status.html'
import PseudoVirtualList from '../pseudoVirtualList/PseudoVirtualList.html'
import LoadingFooter from './LoadingFooter.html'
import MoreHeaderVirtualWrapper from './MoreHeaderVirtualWrapper.html'
import VirtualList from '../virtualList/VirtualList.html'
@ -61,6 +66,7 @@
import { showMoreItemsForCurrentTimeline } from '../../_actions/timeline'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { mark, stop } from '../../_utils/marks'
import { importPseudoVirtualList } from '../../_utils/asyncModules'
export default {
oncreate() {
@ -83,6 +89,9 @@
scrollTop: 0
}),
computed: {
importPseudoVirtualList: (virtual) => {
return !virtual && importPseudoVirtualList()
},
VirtualListComponent: (timelineType) => {
return timelineType === 'notifications' ? NotificationVirtualListItem : StatusVirtualListItem
},
@ -141,7 +150,6 @@
store: () => store,
components: {
VirtualList,
PseudoVirtualList,
LoadingPage
},
events: {

View file

@ -27,4 +27,8 @@ export const importIndexedDBGetAllShim = () => import(
export const importWebSocketClient = () => import(
/* webpackChunkName: '@gamestdio/websocket' */ '@gamestdio/websocket'
).then(mod => mod.default)
export const importPseudoVirtualList = () => import(
/* webpackChunkName: 'PseudoVirtualList' */ '../_components/pseudoVirtualList/PseudoVirtualList.html'
).then(mod => mod.default)