diff --git a/routes/_actions/streaming.js b/routes/_actions/streaming.js index ba869173..a508cea0 100644 --- a/routes/_actions/streaming.js +++ b/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(() => { - handleFreshChanges(instanceName, timelineName) - }) + lazilyProcessFreshChanges(instanceName, timelineName) + stop('handleStreamMessage') } export function createStream (streamingApi, instanceName, accessToken, timelineName) { diff --git a/routes/_actions/timeline.js b/routes/_actions/timeline.js index e5a07628..9b00f31e 100644 --- a/routes/_actions/timeline.js +++ b/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') } \ No newline at end of file diff --git a/routes/_components/timeline/Timeline.html b/routes/_components/timeline/Timeline.html index 7002ca93..08b100b7 100644 --- a/routes/_components/timeline/Timeline.html +++ b/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) - } + scheduleIdleTask(handleItemIdsToAdd) }) }, setupFocus() {