fix worker ordering (#522)

routes/_actions/createMakeProps.js

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

routes/_components/timeline/Timeline.html

@@ -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}`