make timeline components async
This commit is contained in:
parent
b37f371cdb
commit
664cabbda7
|
@ -4,8 +4,10 @@
|
|||
on:focusWithCapture="saveFocus(event)"
|
||||
on:blurWithCapture="clearFocus(event)"
|
||||
>
|
||||
{{#if virtual}}
|
||||
<VirtualList component="{{VirtualListComponent}}"
|
||||
{{#await componentsPromise}}
|
||||
{{then result}}
|
||||
<:Component {result.listComponent}
|
||||
component="{{result.listItemComponent}}"
|
||||
realm="{{$currentInstance + '/' + timeline}}"
|
||||
containerQuery=".container"
|
||||
:makeProps
|
||||
|
@ -15,35 +17,28 @@
|
|||
showHeader="{{$showHeader}}"
|
||||
headerComponent="{{MoreHeaderVirtualWrapper}}"
|
||||
:headerProps
|
||||
:scrollToItem
|
||||
on:scrollToBottom="onScrollToBottom()"
|
||||
on:scrollToTop="onScrollToTop()"
|
||||
on:scrollTopChanged="onScrollTopChanged(event)"
|
||||
on:initialized="initialize()"
|
||||
on:noNeedToScroll="onNoNeedToScroll()"
|
||||
/>
|
||||
{{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}}"
|
||||
scrollToItem="{{scrollToItem}}"
|
||||
on:initialized="initialize()"
|
||||
/>
|
||||
{{/if}}
|
||||
{{catch error}}
|
||||
<div>Error: component failed to load! Try reloading. {{error}}</div>
|
||||
{{/await}}
|
||||
</div>
|
||||
<script>
|
||||
import { store } from '../../_store/store'
|
||||
import StatusVirtualListItem from './StatusVirtualListItem.html'
|
||||
import NotificationVirtualListItem from './NotificationVirtualListItem.html'
|
||||
import Status from '../status/Status.html'
|
||||
import LoadingFooter from './LoadingFooter.html'
|
||||
import MoreHeaderVirtualWrapper from './MoreHeaderVirtualWrapper.html'
|
||||
import VirtualList from '../virtualList/VirtualList.html'
|
||||
import PseudoVirtualList from '../pseudoVirtualList/PseudoVirtualList.html'
|
||||
import {
|
||||
importVirtualList,
|
||||
importPseudoVirtualList,
|
||||
importStatusVirtualListItem,
|
||||
importNotificationVirtualListItem
|
||||
} from '../../_utils/asyncModules'
|
||||
import { timelines } from '../../_static/timelines'
|
||||
import {
|
||||
getStatus as getStatusFromDatabase,
|
||||
|
@ -81,8 +76,22 @@
|
|||
scrollTop: 0
|
||||
}),
|
||||
computed: {
|
||||
VirtualListComponent: (timelineType) => {
|
||||
return timelineType === 'notifications' ? NotificationVirtualListItem : StatusVirtualListItem
|
||||
// For threads, it's simpler to just render all items as a pseudo-virtual list
|
||||
// due to need to scroll to the right item and thus calculate all item heights up-front.
|
||||
// Here we lazy-load both the virtual list component itself as well as the component
|
||||
// it renders.
|
||||
componentsPromise: (timelineType) => {
|
||||
return Promise.all([
|
||||
timelineType === 'status'
|
||||
? importPseudoVirtualList()
|
||||
: importVirtualList(),
|
||||
timelineType === 'notifications'
|
||||
? importNotificationVirtualListItem()
|
||||
: importStatusVirtualListItem()
|
||||
]).then(results => ({
|
||||
listComponent: results[0],
|
||||
listItemComponent: results[1]
|
||||
}))
|
||||
},
|
||||
makeProps: ($currentInstance, timelineType, timelineValue) => async (itemId) => {
|
||||
let res = {
|
||||
|
@ -120,9 +129,6 @@
|
|||
timelineValue: (timeline) => {
|
||||
return timeline.split('/').slice(-1)[0]
|
||||
},
|
||||
// for threads, it's simpler to just render all items as a pseudo-virtual list
|
||||
// due to need to scroll to the right item and thus calculate all item heights up-front
|
||||
virtual: (timelineType) => timelineType !== 'status',
|
||||
// Scroll to the first item if this is a "status in own thread" timeline.
|
||||
// Don't scroll to the first item because it obscures the "back" button.
|
||||
scrollToItem: (timelineType, timelineValue, $firstTimelineItemId) => (
|
||||
|
@ -138,10 +144,6 @@
|
|||
}
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
VirtualList,
|
||||
PseudoVirtualList
|
||||
},
|
||||
events: {
|
||||
focusWithCapture,
|
||||
blurWithCapture
|
||||
|
|
|
@ -25,3 +25,19 @@ export const importWebSocketClient = () => import(
|
|||
export const importDialogs = () => import(
|
||||
/* webpackChunkName: 'dialogs' */ '../_components/dialog/dialogs.js'
|
||||
)
|
||||
|
||||
export const importVirtualList = () => import(
|
||||
/* webpackChunkName: 'VirtualList.html' */ '../_components/virtualList/VirtualList.html'
|
||||
).then(mod => mod.default)
|
||||
|
||||
export const importPseudoVirtualList = () => import(
|
||||
/* webpackChunkName: 'PseudoVirtualList.html' */ '../_components/pseudoVirtualList/PseudoVirtualList.html'
|
||||
).then(mod => mod.default)
|
||||
|
||||
export const importStatusVirtualListItem = () => import(
|
||||
/* webpackChunkName: 'StatusVirtualListItem.html' */ '../_components/timeline/StatusVirtualListItem.html'
|
||||
).then(mod => mod.default)
|
||||
|
||||
export const importNotificationVirtualListItem = () => import(
|
||||
/* webpackChunkName: 'NotificationVirtualListItem.html' */ '../_components/timeline/NotificationVirtualListItem.html'
|
||||
).then(mod => mod.default)
|
||||
|
|
Loading…
Reference in New Issue