temporary hack to avoid excessive observers

routes/_components/timeline/Timeline.html

@@ -138,12 +138,9 @@
           && timelineValue !== $firstTimelineItemId
           && timelineValue
       },
-      itemIdsToAdd: (timeline, $currentInstance, $timelines) => {
+      itemIdsToAdd: ($itemIdsToAdd) => $itemIdsToAdd,
-        return ($timelines &&
+      // hack to avoid getting called too often
-          $timelines[$currentInstance] &&
+      itemIdsToAddStringified: (itemIdsToAdd) => JSON.stringify(itemIdsToAdd),
-          $timelines[$currentInstance][timeline] &&
-          $timelines[$currentInstance][timeline].itemIdsToAdd) || []
-      },
       headerProps: (itemIdsToAdd) => {
         return {
           count: (itemIdsToAdd && itemIdsToAdd.length) || 0,
@@ -207,7 +204,9 @@
             this.store.setForTimeline(instanceName, timelineName, {shouldShowHeader: true})
           }
         }
-        this.observe('itemIdsToAdd', itemIdsToAdd => {
+        this.observe('itemIdsToAddStringified', itemIdsToAddStringified => {
+          let itemIdsToAdd = typeof itemIdsToAddStringified === 'undefined' ? undefined :
+            JSON.parse(itemIdsToAddStringified)
           if (itemIdsToAdd && itemIdsToAdd.length) {
             scheduleIdleTask(handleItemIdsToAdd)
           }

routes/_components/virtualList/VirtualList.html

@@ -33,24 +33,29 @@
 
   export default {
     oncreate () {
+      this.fireScrollToBottom = throttle(() => {
+        this.fire('scrollToBottom')
+      }, SCROLL_EVENT_THROTTLE)
+      this.fireScrollToTop = throttle(() => {
+        this.fire('scrollToTop')
+      }, SCROLL_EVENT_THROTTLE)
       this.observe('showFooter', showFooter => {
+        mark('set showFooter')
         this.store.setForRealm({showFooter: showFooter})
+        mark('set showFooter')
       })
       this.observe('showHeader', showHeader => {
+        mark('set showHeader')
         this.store.setForRealm({showHeader: showHeader})
+        stop('set showHeader')
       })
-      this.observe('items', (items) => {
+      this.observe('itemsStringified', (itemsStringified) => {
+        let items = typeof itemsStringified === 'undefined' ? undefined :
+          JSON.parse(itemsStringified)
         mark('set items')
         this.store.setForRealm({items: items})
         stop('set items')
-        this.fireScrollToBottom = throttle(() => {
-          this.fire('scrollToBottom')
-        }, SCROLL_EVENT_THROTTLE)
-        this.fireScrollToTop = throttle(() => {
-          this.fire('scrollToTop')
-        }, SCROLL_EVENT_THROTTLE)
       })
-
       this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
         if (allVisibleItemsHaveHeight) {
           this.fire('initializedVisibleItems')
@@ -91,7 +96,9 @@
       },
       distanceFromTop: ($scrollTop) => $scrollTop,
       // TODO: bug in svelte store, shouldn't need to do this
-      allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight
+      allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight,
+      // hack to avoid getting called too often
+      itemsStringified: (items) => JSON.stringify(items)
     }
   }
 </script>