IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 02:40:26 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Use handleReducedMotion to smooth the animation in LoadingBar (#85808)

Browse Source
This commit is contained in:
Laura Fernández 2024-04-15 17:27:08 +02:00 committed by GitHub
parent 219c2c761e
commit 82f910c0c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
View File

@ -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`,
}
),
}),
};
};