From 754bbf0d46e309123ad56536806f1138eb06e177 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Wed, 24 Jan 2018 18:04:25 -0800
Subject: [PATCH] properly cache scroll top

---
 routes/_components/Timeline.html             |  1 -
 routes/_components/VirtualListContainer.html | 23 ++++++++++++++------
 routes/_utils/virtualListStore.js            | 11 ++++++++++
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/routes/_components/Timeline.html b/routes/_components/Timeline.html
index 694a040..3426226 100644
--- a/routes/_components/Timeline.html
+++ b/routes/_components/Timeline.html
@@ -8,7 +8,6 @@
                footerComponent="{{LoadingFooter}}"
                showFooter="{{initialized && runningUpdate}}"
                storeKey="{{timeline}}"
-               initialized="{{initialized}}"
   />
 </div>
 <style>
diff --git a/routes/_components/VirtualListContainer.html b/routes/_components/VirtualListContainer.html
index 13abdab..e84e9d8 100644
--- a/routes/_components/VirtualListContainer.html
+++ b/routes/_components/VirtualListContainer.html
@@ -45,9 +45,12 @@
     ondestroy() {
       let storeKey = this.get('storeKey')
       if (storeKey) {
+        let clonedState = this.store.cloneState()
+        if (process.env.NODE_ENV !== 'production') {
+          console.log('caching scroll top', clonedState.scrollTop)
+        }
         cachedVirtualStores[storeKey] = {
-          state: this.store.cloneState(),
-          height: this.store.get('height')
+          state: clonedState
         }
       }
     },
@@ -94,23 +97,29 @@
       },
       onFullscreenChange() {
         mark('onFullscreenChange')
-        console.log('is fullscreen? ', isFullscreen())
+        if (process.env.NODE_ENV !== 'production') {
+          console.log('is fullscreen? ', isFullscreen())
+        }
         this.set({ fullscreen: isFullscreen() })
         stop('onFullscreenChange')
       },
       rehydrateScrollTop(cachedStore) {
         let cachedScrollTop = cachedStore.state.scrollTop || 0
-        let cachedHeight = cachedStore.height
         if (cachedScrollTop === 0) {
-          return
+          if (process.env.NODE_ENV !== 'production') {
+            console.log('no need to force scroll top')
+          }
         }
         let initializedScrollTop = false
         let node = this.refs.node
-        this.store.observe('height', height => {
-          if (!initializedScrollTop && height === cachedHeight && node) {
+        this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
+          if (!initializedScrollTop && allVisibleItemsHaveHeight && node) {
             initializedScrollTop = true
             requestAnimationFrame(() => {
               mark('set scrollTop')
+              if (process.env.NODE_ENV !== 'production') {
+                console.log('forcing scroll top to ', cachedScrollTop)
+              }
               node.scrollTop = cachedScrollTop
               stop('set scrollTop')
             })
diff --git a/routes/_utils/virtualListStore.js b/routes/_utils/virtualListStore.js
index 373a026..f26cdab 100644
--- a/routes/_utils/virtualListStore.js
+++ b/routes/_utils/virtualListStore.js
@@ -117,6 +117,17 @@ virtualListStore.compute('height',
 
 virtualListStore.compute('numItems', ['items'], (items) => items.length)
 
+virtualListStore.compute('allVisibleItemsHaveHeight',
+    ['visibleItems', 'itemHeights'],
+    (visibleItems, itemHeights) => {
+  for (let visibleItem of visibleItems) {
+    if (!itemHeights[visibleItem.key]) {
+      return false
+    }
+  }
+  return true
+})
+
 if (process.browser && process.env.NODE_ENV !== 'production') {
   window.virtualListStore = virtualListStore
 }