clean up observers

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() {

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)
     }
   }
 </script>