diff --git a/routes/_components/timeline/Timeline.html b/routes/_components/timeline/Timeline.html index 7c56b0e..fb82b85 100644 --- a/routes/_components/timeline/Timeline.html +++ b/routes/_components/timeline/Timeline.html @@ -67,6 +67,7 @@ import { scheduleIdleTask } from '../../_utils/scheduleIdleTask' import { mark, stop } from '../../_utils/marks' import { importPseudoVirtualList } from '../../_utils/asyncModules' + import isEqual from 'lodash/isEqual' export default { oncreate() { @@ -138,11 +139,9 @@ && timelineValue }, itemIdsToAdd: ($itemIdsToAdd) => $itemIdsToAdd, - // TODO: hack to avoid getting called too often - itemIdsToAddStringified: (itemIdsToAdd) => JSON.stringify(itemIdsToAdd), headerProps: (itemIdsToAdd) => { return { - count: (itemIdsToAdd && itemIdsToAdd.length) || 0, + count: itemIdsToAdd ? itemIdsToAdd.length : 0, onClick: showMoreItemsForCurrentTimeline } } @@ -188,15 +187,10 @@ let instanceName = this.store.get('currentInstance') let timelineName = this.get('timeline') let handleItemIdsToAdd = () => { - let itemIdsToAdd = this.get('itemIdsToAdd') - if (!itemIdsToAdd || !itemIdsToAdd.length) { - return - } mark('handleItemIdsToAdd') let scrollTop = this.get('scrollTop') let shouldShowHeader = this.store.get('shouldShowHeader') let showHeader = this.store.get('showHeader') - //console.log('handleItemIdsToAdd', (itemIdsToAdd && itemIdsToAdd.length) || 0) if (scrollTop === 0 && !shouldShowHeader && !showHeader) { // if the user is scrolled to the top and we're not showing the header, then // just insert the statuses. this is "chat room mode" @@ -207,10 +201,13 @@ } stop('handleItemIdsToAdd') } - this.observe('itemIdsToAddStringified', itemIdsToAddStringified => { - if (itemIdsToAddStringified) { - scheduleIdleTask(handleItemIdsToAdd) + this.observe('itemIdsToAdd', (newItemIdsToAdd, oldItemIdsToAdd) => { + if (!newItemIdsToAdd || + !newItemIdsToAdd.length || + isEqual(newItemIdsToAdd, oldItemIdsToAdd)) { + return } + scheduleIdleTask(handleItemIdsToAdd) }) }, setupFocus() { diff --git a/routes/_components/virtualList/VirtualList.html b/routes/_components/virtualList/VirtualList.html index c41a154..8cf0b02 100644 --- a/routes/_components/virtualList/VirtualList.html +++ b/routes/_components/virtualList/VirtualList.html @@ -30,6 +30,7 @@ import { virtualListStore } from './virtualListStore' import throttle from 'lodash/throttle' import { mark, stop } from '../../_utils/marks' + import isEqual from 'lodash/isEqual' const DISTANCE_FROM_BOTTOM_TO_FIRE = 400 const SCROLL_EVENT_THROTTLE = 1000 @@ -52,11 +53,12 @@ this.store.setForRealm({showHeader: showHeader}) stop('set showHeader') }) - this.observe('itemsStringified', (itemsStringified) => { - let items = typeof itemsStringified === 'undefined' ? undefined : - JSON.parse(itemsStringified) + this.observe('items', (newItems, oldItems) => { + if (!newItems || isEqual(newItems, oldItems)) { + return + } mark('set items') - this.store.setForRealm({items: items}) + this.store.setForRealm({items: newItems}) stop('set items') }) this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => { @@ -102,8 +104,6 @@ scrollTop: ($scrollTop) => $scrollTop, // TODO: bug in svelte store, shouldn't need to do this allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight, - // TODO: hack to avoid getting called too often - itemsStringified: (items) => JSON.stringify(items) } } \ No newline at end of file