From 3b03bd0e8d77762c5205bc67c17936cbd07d8ddd Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Thu, 22 Mar 2018 22:53:50 -0700 Subject: [PATCH] tweak when to use requestIdleCallback --- .../_components/virtualList/VirtualListContainer.html | 9 ++++++++- routes/_utils/isMobile.js | 11 +++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 routes/_utils/isMobile.js diff --git a/routes/_components/virtualList/VirtualListContainer.html b/routes/_components/virtualList/VirtualListContainer.html index ddeefeb..9f3d7c4 100644 --- a/routes/_components/virtualList/VirtualListContainer.html +++ b/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()') diff --git a/routes/_utils/isMobile.js b/routes/_utils/isMobile.js new file mode 100644 index 0000000..ecab10e --- /dev/null +++ b/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 +}