PanelChrome: Make loading animation speed the same across panels (#62997)

Revert devenv dashboard change

packages/grafana-ui/src/components/LoadingBar/LoadingBar.story.tsx

@@ -49,8 +49,7 @@ export const Basic: ComponentStory<typeof LoadingBar> = (args: LoadingBarProps)
 };
 
 Basic.args = {
-  width: '128px',
+  width: 400,
-  height: '2px',
 };
 
 export default meta;

packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx

@@ -1,48 +1,46 @@
 import { css, keyframes } from '@emotion/css';
-import React from 'react';
+import React, { CSSProperties } from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2 } from '../../themes';
 
 export interface LoadingBarProps {
-  width?: string;
+  width: number;
-  height?: string;
   ariaLabel?: string;
 }
 
-export function LoadingBar({ width, height, ariaLabel = 'Loading bar' }: LoadingBarProps) {
+const MILLISECONDS_PER_PIXEL = 2.4;
-  const styles = useStyles2(getStyles(width, height));
+const MIN_DURATION_MS = 500;
+const MAX_DURATION_MS = 4000;
+
+export function LoadingBar({ width, 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 containerStyles: CSSProperties = {
+    width: '100%',
+    animation: `${styles.animation} ${durationMs}ms infinite linear`,
+    willChange: 'transform',
+  };
 
   return (
-    <div className={styles.container}>
+    <div style={containerStyles}>
       <div aria-label={ariaLabel} className={styles.bar} />
     </div>
   );
 }
 
-const getStyles = (width?: string, height?: string) => (_: GrafanaTheme2) => {
+const getStyles = () => {
-  const barWidth = width ?? '128px';
-  const loadingHeigth = height ?? '2px';
-
-  const loadingAnimation = keyframes({
-    '0%': {
-      transform: 'translateX(0)',
-    },
-    '100%': {
-      transform: `translateX(100%)`,
-    },
-  });
-
   return {
-    container: css({
+    animation: keyframes({
-      width: '100%',
+      '0%': {
-      animation: `${loadingAnimation} 1s infinite linear`,
+        transform: 'translateX(-50%)',
-      willChange: 'transform',
+      },
+      '100%': {
+        transform: `translateX(100%)`,
+      },
     }),
     bar: css({
-      width: barWidth,
+      width: '28%',
-      height: loadingHeigth,
+      height: 1,
       background: 'linear-gradient(90deg, rgba(110, 159, 255, 0) 0%, #6E9FFF 80.75%, rgba(110, 159, 255, 0) 100%)',
     }),
   };

packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx

@@ -147,9 +147,7 @@ export function PanelChrome({
       aria-label={ariaLabel}
     >
       <div className={styles.loadingBarContainer}>
-        {loadingState === LoadingState.Loading ? (
+        {loadingState === LoadingState.Loading ? <LoadingBar width={width} ariaLabel="Panel loading bar" /> : null}
-          <LoadingBar width={'28%'} height={'2px'} ariaLabel="Panel loading bar" />
-        ) : null}
       </div>
 
       {(hoverHeader || !hasHeader) && menu && (