From 75b4d09b64e362b1ca94756392d300add0a10932 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 27 Apr 2018 09:21:30 -0700
Subject: [PATCH] remove AsyncLayout in favor of rAf + gBCR

---
 .../virtualList/VirtualListFooter.html        |  9 ++--
 .../virtualList/VirtualListHeader.html        |  9 ++--
 .../virtualList/VirtualListItem.html          |  9 ++--
 routes/_utils/AsyncLayout.js                  | 50 -------------------
 4 files changed, 15 insertions(+), 62 deletions(-)
 delete mode 100644 routes/_utils/AsyncLayout.js

diff --git a/routes/_components/virtualList/VirtualListFooter.html b/routes/_components/virtualList/VirtualListFooter.html
index 37c8587..02125a5 100644
--- a/routes/_components/virtualList/VirtualListFooter.html
+++ b/routes/_components/virtualList/VirtualListFooter.html
@@ -12,13 +12,14 @@
 </style>
 <script>
   import { virtualListStore } from './virtualListStore'
-  import { AsyncLayout } from '../../_utils/AsyncLayout'
+  import { mark, stop } from '../../_utils/marks'
 
   export default {
     oncreate () {
-      const asyncLayout = new AsyncLayout(() => '__footer__')
-      asyncLayout.observe('__footer__', this.refs.node, (rect) => {
-        asyncLayout.disconnect()
+      requestAnimationFrame(() => {
+        mark('VirtualListFooter gBCR')
+        let rect = this.refs.node.getBoundingClientRect()
+        stop('VirtualListFooter gBCR')
         this.store.setForRealm({footerHeight: rect.height})
       })
     },
diff --git a/routes/_components/virtualList/VirtualListHeader.html b/routes/_components/virtualList/VirtualListHeader.html
index c9e86b9..855437f 100644
--- a/routes/_components/virtualList/VirtualListHeader.html
+++ b/routes/_components/virtualList/VirtualListHeader.html
@@ -22,8 +22,8 @@
 </style>
 <script>
   import { virtualListStore } from './virtualListStore'
-  import { AsyncLayout } from '../../_utils/AsyncLayout'
   import { doubleRAF } from '../../_utils/doubleRAF'
+  import { mark, stop } from '../../_utils/marks'
 
   export default {
     oncreate () {
@@ -44,9 +44,10 @@
           return
         }
         this.set({heightCalculated: true})
-        const asyncLayout = new AsyncLayout(() => '__header__')
-        asyncLayout.observe('__header__', this.refs.node, (rect) => {
-          asyncLayout.disconnect()
+        requestAnimationFrame(() => {
+          mark('VirtualListHeader gBCR')
+          let rect = this.refs.node.getBoundingClientRect()
+          stop('VirtualListHeader gBCR')
           this.store.setForRealm({headerHeight: rect.height})
         })
       }
diff --git a/routes/_components/virtualList/VirtualListItem.html b/routes/_components/virtualList/VirtualListItem.html
index 9bece61..e7e4a47 100644
--- a/routes/_components/virtualList/VirtualListItem.html
+++ b/routes/_components/virtualList/VirtualListItem.html
@@ -24,15 +24,16 @@
 </style>
 <script>
   import { virtualListStore } from './virtualListStore'
-  import { AsyncLayout } from '../../_utils/AsyncLayout'
   import { registerResizeListener, unregisterResizeListener } from '../../_utils/resize'
+  import { mark, stop } from '../../_utils/marks'
 
   export default {
     oncreate () {
-      let asyncLayout = new AsyncLayout(node => node.getAttribute('virtual-list-key'))
       let { key } = this.get()
-      asyncLayout.observe(key, this.refs.node, (rect) => {
-        asyncLayout.disconnect()
+      requestAnimationFrame(() => {
+        mark('VirtualListItem gBCR')
+        let rect = this.refs.node.getBoundingClientRect()
+        stop('VirtualListItem gBCR')
         // update all item heights in one batch for better perf
         this.store.batchUpdateForRealm('itemHeights', key, rect.height)
       })
diff --git a/routes/_utils/AsyncLayout.js b/routes/_utils/AsyncLayout.js
deleted file mode 100644
index d13a9d3..0000000
--- a/routes/_utils/AsyncLayout.js
+++ /dev/null
@@ -1,50 +0,0 @@
-// Use intersection observer to calculate rects asynchronously
-import { getRectFromEntry } from './getRectFromEntry'
-
-class AsyncLayout {
-  constructor (generateKeyFromNode) {
-    this._onIntersectionCallbacks = {}
-
-    this._intersectionObserver = new IntersectionObserver(entries => {
-      entries.forEach(entry => {
-        let key = generateKeyFromNode(entry.target)
-        this._onIntersectionCallbacks[key](entry)
-      })
-    })
-  }
-
-  observe (key, node, callback) {
-    if (!node) {
-      return
-    }
-    if (this._intersectionObserver) {
-      this._onIntersectionCallbacks[key] = (entry) => {
-        callback(getRectFromEntry(entry))
-        this.unobserve(key, node)
-      }
-      this._intersectionObserver.observe(node)
-    }
-  }
-
-  unobserve (key, node) {
-    if (key in this._onIntersectionCallbacks) {
-      return
-    }
-    if (!node) {
-      return
-    }
-    if (this._intersectionObserver) {
-      this._intersectionObserver.unobserve(node)
-    }
-    delete this._onIntersectionCallbacks[key]
-  }
-
-  disconnect () {
-    if (this._intersectionObserver) {
-      this._intersectionObserver.disconnect()
-      this._intersectionObserver = null
-    }
-  }
-}
-
-export { AsyncLayout }