IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

GrafanaUI: Adds overflow wrapper to loading bar (#75451)

Browse Source
This commit is contained in:
Gilles De Mey 2023-09-27 08:09:52 +02:00 committed by GitHub
parent 87ced17060
commit d24dc7f156
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,24 +1,28 @@
import { css, keyframes } from '@emotion/css'; import { css, keyframes } from '@emotion/css';
import React, { CSSProperties } from 'react'; import React, { CSSProperties } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '../../themes'; import { useStyles2 } from '../../themes';
export interface LoadingBarProps { export interface LoadingBarProps {
width: number; width: number;
delay?: number;
ariaLabel?: string; ariaLabel?: string;
} }
const BAR_WIDTH = 28;
const MILLISECONDS_PER_PIXEL = 2.4; const MILLISECONDS_PER_PIXEL = 2.4;
const MIN_DURATION_MS = 500; const MIN_DURATION_MS = 500;
const MAX_DURATION_MS = 4000; const MAX_DURATION_MS = 4000;
const DEFAULT_ANIMATION_DELAY = 300;
const MAX_TRANSLATE_X = (100 / BAR_WIDTH) * 100;
export function LoadingBar({ width, ariaLabel = 'Loading bar' }: LoadingBarProps) { export function LoadingBar({ width, delay = DEFAULT_ANIMATION_DELAY, ariaLabel = 'Loading bar' }: LoadingBarProps) {
const styles = useStyles2(getStyles);
const durationMs = Math.min(Math.max(Math.round(width * MILLISECONDS_PER_PIXEL), MIN_DURATION_MS), MAX_DURATION_MS); const durationMs = Math.min(Math.max(Math.round(width * MILLISECONDS_PER_PIXEL), MIN_DURATION_MS), MAX_DURATION_MS);
const styles = useStyles2((theme) => getStyles(theme, delay, durationMs));
const containerStyles: CSSProperties = { const containerStyles: CSSProperties = {
width: '100%', overflow: 'hidden',
animation: `${styles.animation} ${durationMs}ms infinite linear`,
willChange: 'transform',
}; };
return ( return (
@ -28,20 +32,30 @@ export function LoadingBar({ width, ariaLabel = 'Loading bar' }: LoadingBarProps
); );
} }
const getStyles = () => { const getStyles = (_theme: GrafanaTheme2, delay: number, duration: number) => {
const animation = keyframes({
'0%': {
transform: 'translateX(-100%)',
},
// this gives us a delay between iterations
'85%, 100%': {
transform: `translateX(${MAX_TRANSLATE_X}%)`,
},
});
return { return {
animation: keyframes({
'0%': {
transform: 'translateX(-50%)',
},
'100%': {
transform: `translateX(100%)`,
},
}),
bar: css({ bar: css({
width: '28%', width: BAR_WIDTH + '%',
height: 1, height: 1,
background: 'linear-gradient(90deg, rgba(110, 159, 255, 0) 0%, #6E9FFF 80.75%, rgba(110, 159, 255, 0) 100%)', background: 'linear-gradient(90deg, rgba(110, 159, 255, 0) 0%, #6E9FFF 80.75%, rgba(110, 159, 255, 0) 100%)',
transform: 'translateX(-100%)',
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',
}), }),
}; };
}; };

1
packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
View File

@ -395,7 +395,6 @@ const getStyles = (theme: GrafanaTheme2) => {
position: 'absolute', position: 'absolute',
top: 0, top: 0,
width: '100%', width: '100%',
overflow: 'hidden',
}), }),
containNone: css({ containNone: css({
contain: 'none', contain: 'none',