fix: scroll to inspected item

Guillaume Chau · Guillaume Chau · commit a0eacfa1c4eb · 2019-10-29T18:12:56.000+01:00
diff --git a/packages/app-frontend/src/mixins/entry-list.js b/packages/app-frontend/src/mixins/entry-list.js
@@ -18,35 +18,39 @@ export default function ({
     },
 
     methods: {
-      refreshScrollToInspected: debounce(function () {
-        requestAnimationFrame(() => {
-          if (this.inspectedIndex) this.scrollIntoInspected(this.inspectedIndex)
-        })
-      }, 200, {
-        leading: true
-      }),
+      refreshScrollToInspected () {
+        if (this.inspectedIndex) this.scrollIntoInspected(this.inspectedIndex)
+      },
 
-      scrollIntoInspected: debounce(function (index) {
+      scrollIntoInspected: debounce(async function (index) {
         index += indexOffset
-        this.$nextTick(() => {
-          const scroller = this.$globalRefs.leftRecycleList || this.$globalRefs.leftScroll
-          if (!scroller) {
-            this.scrollIntoInspected(index)
-            return
-          }
-          const parentHeight = scroller.offsetHeight
-          const height = this.highDensity ? 22 : 34
-          const top = index * height
-          const scrollTop = scroller.scrollTop
-          if (top < scrollTop) {
-            scroller.scrollTop = top
-          } else if (top + height > scrollTop + parentHeight) {
-            scroller.scrollTop = top + height - parentHeight
-          }
-        })
+        // Wait for defer frames (time-slicing)
+        for (let f = 0; f < 2; f++) {
+          await waitForFrame()
+        }
+        const scroller = this.$globalRefs.leftRecycleList || this.$globalRefs.leftScroll
+        if (!scroller) {
+          this.scrollIntoInspected(index)
+          return
+        }
+        const parentHeight = scroller.offsetHeight
+        const height = this.highDensity ? 22 : 34
+        const top = index * height
+        const scrollTop = scroller.scrollTop
+        if (top < scrollTop) {
+          scroller.scrollTop = top
+        } else if (top + height > scrollTop + parentHeight) {
+          scroller.scrollTop = top + height - parentHeight
+        }
       }, 200, {
         leading: true
       })
     }
   }
 }
+
+function waitForFrame () {
+  return new Promise(resolve => {
+    requestAnimationFrame(resolve)
+  })
+}
