remove AsyncLayout in favor of rAf + gBCR

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})
       })
     },

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

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

routes/_utils/AsyncLayout.js

@@ -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 }