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

View File

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