data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

make timeline components async (#204)

Browse source
This commit is contained in:
Nolan Lawson 2018-04-21 08:45:41 -07:00 committed by GitHub
parent 36b8f15ba6
commit 78f44c7b51
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
routes/_components/timeline/Timeline.html
View file

@ -4,46 +4,41 @@
on:focusWithCapture="saveFocus(event)"
on:blurWithCapture="clearFocus(event)"
>
{{#if virtual}}
<VirtualList component="{{VirtualListComponent}}"
realm="{{$currentInstance + '/' + timeline}}"
containerQuery=".container"
:makeProps
items="{{$timelineItemIds}}"
showFooter="{{$timelineInitialized && $runningUpdate}}"
footerComponent="{{LoadingFooter}}"
showHeader="{{$showHeader}}"
headerComponent="{{MoreHeaderVirtualWrapper}}"
:headerProps
on:scrollToBottom="onScrollToBottom()"
on:scrollToTop="onScrollToTop()"
on:scrollTopChanged="onScrollTopChanged(event)"
on:initialized="initialize()"
on:noNeedToScroll="onNoNeedToScroll()"
{{#await componentsPromise}}
{{then result}}
<:Component {result.listComponent}
component="{{result.listItemComponent}}"
realm="{{$currentInstance + '/' + timeline}}"
containerQuery=".container"
:makeProps
items="{{$timelineItemIds}}"
showFooter="{{$timelineInitialized && $runningUpdate}}"
footerComponent="{{LoadingFooter}}"
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

16
routes/_utils/asyncModules.js
View file

@ -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)