add markers, tweak how streaming is processed

routes/_actions/streaming.js

@@ -3,6 +3,8 @@ import identity from 'lodash/identity'
 import { database } from '../_database/database'
 import { store } from '../_store/store'
 import { scheduleIdleTask } from '../_utils/scheduleIdleTask'
+import throttle from 'lodash/throttle'
+import { mark, stop } from '../_utils/marks'
 
 async function removeDuplicates (instanceName, timelineName, updates) {
   // remove duplicates, including duplicates due to reblogs
@@ -15,7 +17,8 @@ async function removeDuplicates (instanceName, timelineName, updates) {
   return updates.filter(update => !existingItemIds.has(update.id))
 }
 
-async function handleFreshChanges (instanceName, timelineName) {
+async function processFreshChanges (instanceName, timelineName) {
+  mark('processFreshChanges')
   let freshChanges = store.getForTimeline(instanceName, timelineName, 'freshChanges')
   if (freshChanges.updates && freshChanges.updates.length) {
     let updates = freshChanges.updates.slice()
@@ -29,21 +32,29 @@ async function handleFreshChanges (instanceName, timelineName) {
     let itemIdsToAdd = store.getForTimeline(instanceName, timelineName, 'itemIdsToAdd') || []
     if (updates && updates.length) {
       itemIdsToAdd = itemIdsToAdd.concat(updates.map(_ => _.id))
+      console.log('adding ', itemIdsToAdd.length, 'items to itemIdsToAdd')
       store.setForTimeline(instanceName, timelineName, {itemIdsToAdd: itemIdsToAdd})
     }
+    stop('processFreshChanges')
   }
 }
 
+const lazilyProcessFreshChanges = throttle((instanceName, timelineName) => {
+  scheduleIdleTask(() => {
+    processFreshChanges(instanceName, timelineName)
+  })
+}, 5000)
+
 function handleStreamMessage (instanceName, timelineName, message) {
+  mark('handleStreamMessage')
   let { event, payload } = message
   let key = event === 'update' ? 'updates' : 'deletes'
   let freshChanges = store.getForTimeline(instanceName, timelineName, 'freshChanges') || {}
   freshChanges[key] = freshChanges[key] || []
   freshChanges[key].push(JSON.parse(payload))
   store.setForTimeline(instanceName, timelineName, {freshChanges: freshChanges})
-  scheduleIdleTask(() => {
+  lazilyProcessFreshChanges(instanceName, timelineName)
-    handleFreshChanges(instanceName, timelineName)
+  stop('handleStreamMessage')
-  })
 }
 
 export function createStream (streamingApi, instanceName, accessToken, timelineName) {

routes/_actions/timeline.js

@@ -83,6 +83,7 @@ export async function fetchTimelineItemsOnScrollToBottom () {
 }
 
 export async function showMoreItemsForCurrentTimeline() {
+  mark('showMoreItemsForCurrentTimeline')
   let instanceName = store.get('currentInstance')
   let timelineName = store.get('currentTimeline')
   let itemIdsToAdd = store.get('itemIdsToAdd')
@@ -92,4 +93,5 @@ export async function showMoreItemsForCurrentTimeline() {
     shouldShowHeader: false,
     showHeader: false
   })
+  stop('showMoreItemsForCurrentTimeline')
 }

routes/_components/timeline/Timeline.html

@@ -73,6 +73,7 @@
   import { showMoreItemsForCurrentTimeline } from '../../_actions/timeline'
   import { virtualListStore } from '../virtualList/virtualListStore' // TODO: hacky, need better way to expose scrollTop
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
+  import { mark, stop } from '../../_utils/marks'
 
   export default {
     oncreate() {
@@ -191,6 +192,7 @@
           if (!itemIdsToAdd || !itemIdsToAdd.length) {
             return
           }
+          mark('handleItemIdsToAdd')
           let scrollTop = virtualListStore.get('scrollTop')
           let shouldShowHeader = this.store.get('shouldShowHeader')
           let showHeader = this.store.get('showHeader')
@@ -203,13 +205,10 @@
             // user hasn't scrolled to the top, show a header instead
             this.store.setForTimeline(instanceName, timelineName, {shouldShowHeader: true})
           }
+          stop('handleItemIdsToAdd')
         }
         this.observe('itemIdsToAddStringified', itemIdsToAddStringified => {
-          let itemIdsToAdd = typeof itemIdsToAddStringified === 'undefined' ? undefined :
-            JSON.parse(itemIdsToAddStringified)
-          if (itemIdsToAdd && itemIdsToAdd.length) {
           scheduleIdleTask(handleItemIdsToAdd)
-          }
         })
       },
       setupFocus() {