From 82f910c0c5e1c9b0c903dc40d0094e3a00b3b2f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Mon, 15 Apr 2024 17:27:08 +0200
Subject: [PATCH] Chore: Use `handleReducedMotion` to smooth the animation in
 `LoadingBar` (#85808)

---
 .../src/components/LoadingBar/LoadingBar.tsx           | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
index 0084d82a550..07186be5e8c 100644
--- a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
+++ b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
@@ -4,6 +4,7 @@ import React, { CSSProperties } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2 } from '../../themes';
+import { handleReducedMotion } from '../../utils/handleReducedMotion';
 
 export interface LoadingBarProps {
   width: number;
@@ -52,10 +53,17 @@ const getStyles = (_theme: GrafanaTheme2, delay: number, duration: number) => {
       animationName: animation,
       // an initial delay to prevent the loader from showing if the response is faster than the delay
       animationDelay: `${delay}ms`,
-      animationDuration: `${duration}ms`,
       animationTimingFunction: 'linear',
       animationIterationCount: 'infinite',
       willChange: 'transform',
+      ...handleReducedMotion(
+        {
+          animationDuration: `${duration}ms`,
+        },
+        {
+          animationDuration: `${4 * duration}ms`,
+        }
+      ),
     }),
   };
 };