From 3d9c9e8565306e2f00eeb3f9ca4f03495bbed688 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 28 Jan 2023 13:59:47 +0530
Subject: [PATCH] fix: Fixed issue where reduced motion preference would not be
 honored for some animations

---
 .../src/javascripts/Components/Panes/PanesSystemComponent.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/javascripts/Components/Panes/PanesSystemComponent.tsx b/packages/web/src/javascripts/Components/Panes/PanesSystemComponent.tsx
index 4b58f8930..69885b989 100644
--- a/packages/web/src/javascripts/Components/Panes/PanesSystemComponent.tsx
+++ b/packages/web/src/javascripts/Components/Panes/PanesSystemComponent.tsx
@@ -19,6 +19,7 @@ import {
 } from '@/Components/Panes/PaneAnimator'
 import { isPanesChangeLeafDismiss, isPanesChangePush } from '@/Controllers/PaneController/panesForLayout'
 import { log, LoggingDomain } from '@/Logging'
+import { useMediaQuery } from '@/Hooks/useMediaQuery'
 
 const NAVIGATION_PANEL_MIN_WIDTH = 48
 const ITEMS_PANEL_MIN_WIDTH = 200
@@ -53,7 +54,8 @@ const PanesSystemComponent = () => {
 
   const [_editorRef, setEditorRef] = useState<HTMLDivElement | null>(null)
 
-  const animationsSupported = isMobile
+  const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
+  const animationsSupported = isMobile && !prefersReducedMotion
 
   useEffect(() => {
     if (!animationsSupported) {