From 2cdb7d923f4dc4e917c61382014a981bbe346d15 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 13 May 2024 10:48:41 +0100
Subject: [PATCH] EmptyState: Don't apply animation when
 `prefers-reduced-motion` is set (#87638)

* don't apply animation when prefers-reduced-motion is set

* bail quicker

* early return
---
 .../src/components/EmptyState/GrotNotFound/GrotNotFound.tsx  | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/grafana-ui/src/components/EmptyState/GrotNotFound/GrotNotFound.tsx b/packages/grafana-ui/src/components/EmptyState/GrotNotFound/GrotNotFound.tsx
index 1f09105dbf6..4a288f886d1 100644
--- a/packages/grafana-ui/src/components/EmptyState/GrotNotFound/GrotNotFound.tsx
+++ b/packages/grafana-ui/src/components/EmptyState/GrotNotFound/GrotNotFound.tsx
@@ -24,6 +24,11 @@ export const GrotNotFound = ({ width = 'auto', height }: Props) => {
 
   useEffect(() => {
     const handleMouseMove = (event: MouseEvent) => {
+      // don't apply animation if reduced motion preference is set
+      if (window.matchMedia('(prefers-reduced-motion: reduce').matches) {
+        return;
+      }
+
       const grotArm = svgRef.current?.querySelector('#grot-not-found-arm');
       const grotMagnifier = svgRef.current?.querySelector('#grot-not-found-magnifier');