From 5e3e56d454745a6d51c86cc0aabd167006e503a4 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 16 Jan 2018 20:34:09 -0800
Subject: [PATCH] use IntersectionObserver for virtual scroll

---
 package-lock.json                       |  5 +++
 package.json                            |  1 +
 routes/_components/Status.html          |  2 +-
 routes/_components/Timeline.html        |  5 +++
 routes/_components/VirtualList.html     |  2 -
 routes/_components/VirtualListItem.html | 60 +++++++++++++++++--------
 routes/_utils/asyncModules.js           |  7 ++-
 templates/main.js                       |  4 +-
 8 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9664624f..e3330b40 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3344,6 +3344,11 @@
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.1.0.tgz",
       "integrity": "sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ="
     },
+    "intersection-observer": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.5.0.tgz",
+      "integrity": "sha512-8Zgt4ijlyvIrQVTA7MPb2W9+KhoetrAbxlh0RmTGxpx0+ZsAXvy7IsbNnZIrqZ6TddAdWeQj49x7Ph7Ir6KRkA=="
+    },
     "intl-messageformat": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-2.2.0.tgz",
diff --git a/package.json b/package.json
index ec8a1a27..71720764 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "font-awesome-svg-png": "^1.2.2",
     "glob": "^7.1.2",
     "idb": "^2.0.4",
+    "intersection-observer": "^0.5.0",
     "intl-relativeformat": "^2.1.0",
     "lodash": "^4.17.4",
     "node-fetch": "^1.7.3",
diff --git a/routes/_components/Status.html b/routes/_components/Status.html
index 4617ba2c..bc5e51e0 100644
--- a/routes/_components/Status.html
+++ b/routes/_components/Status.html
@@ -61,7 +61,7 @@
         ".............. status-toolbar";
     grid-template-columns: 58px 1fr;
     border-bottom: 1px solid var(--main-border);
-    will-change: transform; /* TODO: is this necessary? */
+    /* will-change: transform; */ /* TODO: is this necessary? */
   }
 
   :global(.status-sidebar) {
diff --git a/routes/_components/Timeline.html b/routes/_components/Timeline.html
index c6bd7c63..3561d7ed 100644
--- a/routes/_components/Timeline.html
+++ b/routes/_components/Timeline.html
@@ -2,6 +2,11 @@
   <VirtualList component="{{StatusListItem}}" items="{{statuses}}" />
   <button type="button" on:click="addMoreItems()">Add more items</button>
 </div>
+<style>
+  .timeline {
+    min-height: 50vh;
+  }
+</style>
 <script>
   import { store } from '../_utils/store'
   import { getHomeTimeline } from '../_utils/mastodon/oauth'
diff --git a/routes/_components/VirtualList.html b/routes/_components/VirtualList.html
index 8bbee0e1..3ee14d8b 100644
--- a/routes/_components/VirtualList.html
+++ b/routes/_components/VirtualList.html
@@ -42,8 +42,6 @@
         })
       }, THROTTLE_TIME))
     },
-    ondestroy () {
-    },
     data: () => ({
       component: null
     }),
diff --git a/routes/_components/VirtualListItem.html b/routes/_components/VirtualListItem.html
index 16bcd367..fad96839 100644
--- a/routes/_components/VirtualListItem.html
+++ b/routes/_components/VirtualListItem.html
@@ -1,4 +1,5 @@
-<div class="virtual-list-item"
+<div class="virtual-list-item {{shown ? 'shown' : ''}}"
+     virtual-list-key="{{key}}"
      ref:node
      style="transform: translate3d(0, {{offset}}px, 0);"
 >
@@ -8,6 +9,12 @@
   .virtual-list-item {
     position: absolute;
     top: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .shown {
+    opacity: 1;
+    pointer-events: auto;
   }
 </style>
 <script>
@@ -15,28 +22,45 @@
 
   let updateItemHeights = {}
   let promise = Promise.resolve()
+  let onIntersectionCallbacks = {}
+
+  let intersectionObserver = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      let key = entry.target.getAttribute('virtual-list-key')
+      onIntersectionCallbacks[key](entry)
+    })
+  })
 
   export default {
     oncreate() {
       let key = this.get('key')
-      updateItemHeights[key] = this.refs.node.offsetHeight
-      promise.then(() => {
-        // update all item heights in one microtask batch for better perf
-        let updatedKeys = Object.keys(updateItemHeights)
-        if (!updatedKeys.length) {
-          return
-        }
-        // batch all updates to itemHeights for better perf
-        let itemHeights = this.store.get('itemHeights')
-        for (key of updatedKeys) {
-          itemHeights[key] = updateItemHeights[key]
-        }
-        this.store.set({
-          itemHeights: itemHeights
+      onIntersectionCallbacks[key] = entry => {
+        updateItemHeights[key] = entry.boundingClientRect.height
+        promise.then(() => {
+          // update all item heights in one microtask batch for better perf
+          let updatedKeys = Object.keys(updateItemHeights)
+          if (!updatedKeys.length) {
+            return
+          }
+          // batch all updates to itemHeights for better perf
+          let itemHeights = this.store.get('itemHeights')
+          for (key of updatedKeys) {
+            itemHeights[key] = updateItemHeights[key]
+          }
+          this.store.set({
+            itemHeights: itemHeights
+          })
+          updateItemHeights = {}
         })
-        updateItemHeights = {}
-      })
+      }
+      intersectionObserver.observe(this.refs.node)
     },
-    store: () => virtualListStore
+    ondestroy() {
+      intersectionObserver.unobserve(this.refs.node)
+    },
+    store: () => virtualListStore,
+    computed: {
+      'shown': ($itemHeights, key) => $itemHeights[key] > 0
+    }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_utils/asyncModules.js b/routes/_utils/asyncModules.js
index 8f1c7b79..f3248ad1 100644
--- a/routes/_utils/asyncModules.js
+++ b/routes/_utils/asyncModules.js
@@ -13,7 +13,12 @@ const importTimeline = () => import(
   /* webpackChunkName: 'Timeline' */ '../_components/Timeline.html'
   ).then(mod => mod.default)
 
+const importIntersectionObserver = () => import(
+  /* webpackChunkname: 'intersection-observer' */ 'intersection-observer'
+  )
+
 export {
   importURLSearchParams,
-  importTimeline
+  importTimeline,
+  importIntersectionObserver
 }
\ No newline at end of file
diff --git a/templates/main.js b/templates/main.js
index f55c8724..924155ba 100644
--- a/templates/main.js
+++ b/templates/main.js
@@ -1,9 +1,11 @@
 import { init } from 'sapper/runtime.js'
 import { importURLSearchParams } from '../routes/_utils/asyncModules'
+import { importIntersectionObserver } from '../routes/_utils/asyncModules'
 
 // polyfills
 Promise.all([
-  typeof URLSearchParams === 'undefined' && importURLSearchParams()
+  typeof URLSearchParams === 'undefined' && importURLSearchParams(),
+  typeof IntersectionObserver === 'undefined' && importIntersectionObserver()
 ]).then(() => {
   // `routes` is an array of route objects injected by Sapper
   init(document.querySelector('#sapper'), __routes__)