From 5f6c5d89d1712c8bdfde060e968bfa01b6552751 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 28 Apr 2020 17:48:25 -0700
Subject: [PATCH] fix: only avoid scrollbar motion for prefers-reduced-motion
 (#1750)

After thinking about it, I do not believe the scrollbar is that distracting. But for prefers-reduced-motion we should be careful about the scrollbar growing so quickly.
---
 .../virtualList/VirtualListLazyItem.html        | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/routes/_components/virtualList/VirtualListLazyItem.html b/src/routes/_components/virtualList/VirtualListLazyItem.html
index 9d53d390..cc1bff32 100644
--- a/src/routes/_components/virtualList/VirtualListLazyItem.html
+++ b/src/routes/_components/virtualList/VirtualListLazyItem.html
@@ -12,6 +12,7 @@
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
   import { createPriorityQueue } from '../../_utils/createPriorityQueue'
   import { isMobile } from '../../_utils/userAgent/isMobile'
+  import { store } from '../../_store/store'
 
   // In Svelte's implementation of lists, these VirtualListLazyItems can be
   // created in any order. By default in fact it seems to do it in reverse
@@ -25,6 +26,7 @@
   export default {
     async oncreate () {
       const { makeProps, key, index } = this.get()
+      const { reduceMotion } = this.store.get()
       if (makeProps) {
         await priorityQueue(index)
         const props = await makeProps(key)
@@ -33,23 +35,22 @@
           this.set({ props: props })
           stop('VirtualListLazyItem set props')
         }
-        // On mobile, render in rIC for maximum input responsiveness. The reason we do
-        // different behavior for desktop versus mobile is:
-        // 1. On desktop, the scrollbar is really distracting as it changes size. It may
-        //    even cause issues for people with vestibular disorders (see also prefers-reduced-motion).
-        // 2. On mobile, the CPU is generally slower, so we want better input responsiveness.
+        // On desktop, if prefers-reduced-motion is enabled, avoid using scheduleIdleTask
+        // here because it causes the scrollbar to grow in a way that may sicken
+        // people with vestibular disorders.
         // TODO: someday we can use isInputPending as a better way to break up work
         // https://www.chromestatus.com/feature/5719830432841728
-        if (isMobile()) {
-          scheduleIdleTask(setProps)
-        } else {
+        if (!isMobile() && reduceMotion) {
           setProps()
+        } else {
+          scheduleIdleTask(setProps)
         }
       }
     },
     data: () => ({
       props: undefined
     }),
+    store: () => store,
     components: {
       VirtualListItem
     }