fix worker ordering (#522)

This commit is contained in:
Nolan Lawson 2018-08-29 22:03:29 -07:00 committed by GitHub
parent 8dbc1b0503
commit 6d8f4e22ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 13 deletions

View file

@ -0,0 +1,47 @@
import { database } from '../_database/database'
async function getNotification (instanceName, timelineType, timelineValue, itemId) {
return {
timelineType,
timelineValue,
notification: await database.getNotification(instanceName, itemId)
}
}
async function getStatus (instanceName, timelineType, timelineValue, itemId) {
return {
timelineType,
timelineValue,
status: await database.getStatus(instanceName, itemId)
}
}
export function createMakeProps (instanceName, timelineType, timelineValue) {
let taskCount = 0
let pending = []
// The worker-powered indexeddb promises can resolve in arbitrary order,
// causing the timeline to load in a jerky way. With this function, we
// wait for all promises to resolve before resolving them all in one go.
function awaitAllTasksComplete () {
return new Promise(resolve => {
taskCount--
pending.push(resolve)
if (taskCount === 0) {
pending.forEach(_ => _())
pending = []
}
})
}
return (itemId) => {
taskCount++
let promise = timelineType === 'notifications'
? getNotification(instanceName, timelineType, timelineValue, itemId)
: getStatus(instanceName, timelineType, timelineValue, itemId)
return promise.then(res => {
return awaitAllTasksComplete().then(() => res)
})
}
}

View file

@ -41,7 +41,6 @@
importNotificationVirtualListItem
} from '../../_utils/asyncModules'
import { timelines } from '../../_static/timelines'
import { database } from '../../_database/database'
import {
fetchTimelineItemsOnScrollToBottom,
setupTimeline,
@ -55,6 +54,7 @@
import isEqual from 'lodash-es/isEqual'
import { doubleRAF } from '../../_utils/doubleRAF'
import { observe } from 'svelte-extras'
import { createMakeProps } from '../../_actions/createMakeProps'
export default {
oncreate () {
@ -92,18 +92,9 @@
listItemComponent: results[1]
}))
},
makeProps: ({ $currentInstance, timelineType, timelineValue }) => async (itemId) => {
let res = {
timelineType,
timelineValue
}
if (timelineType === 'notifications') {
res.notification = await database.getNotification($currentInstance, itemId)
} else {
res.status = await database.getStatus($currentInstance, itemId)
}
return res
},
makeProps: ({ $currentInstance, timelineType, timelineValue }) => (
createMakeProps($currentInstance, timelineType, timelineValue)
),
label: ({ timeline, $currentInstance, timelineType, timelineValue }) => {
if (timelines[timeline]) {
return `Statuses: ${timelines[timeline].label} timeline on ${$currentInstance}`