tweak when to use requestIdleCallback

routes/_components/virtualList/VirtualListContainer.html

@@ -5,6 +5,7 @@
   import { isFullscreen, attachFullscreenListener, detachFullscreenListener } from '../../_utils/fullscreen'
   import { mark, stop } from '../../_utils/marks'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
+  import { isMobile } from '../../_utils/isMobile'
 
   const SCROLL_EVENT_DELAY = 300
 
@@ -72,7 +73,13 @@
       },
       onScroll(event) {
         let { scrollTop, scrollHeight } = event.target
-        scheduleIdleTask(() => { // delay slightly to improve scroll perf
+
+        // On mobile devices, this can make scrolling more responsive. On
+        // desktop browsers... it's probably overkill, and can lead to a
+        // checkerboarding issue ("I just scrolled, why is it blank for 5 seconds?").
+        let runTask = isMobile() ? scheduleIdleTask : requestAnimationFrame
+
+        runTask(() => {
           mark('onScroll -> setForRealm()')
           this.store.setForRealm({scrollTop, scrollHeight})
           stop('onScroll -> setForRealm()')

routes/_utils/isMobile.js

@@ -0,0 +1,11 @@
+// Rough guess at whether this is a "mobile" device or not, for the purposes
+// of "device class" estimations
+
+let cached
+
+export function isMobile () {
+  if (!cached) {
+    cached = !!(process.browser && navigator.userAgent.match(/(iPhone|iPod|iPad|Android)/))
+  }
+  return cached
+}