From 17605f97af17ef16e626d11c5c69434ebb140ca1 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 10 Feb 2023 04:20:35 -0500
Subject: [PATCH] [v9.4.x] PanelChrome: Make loading animation speed the same
 across panels  (#63242)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Revert devenv dashboard change

(cherry picked from commit ed626427de8da5895a24bd7c6aef81e24b663386)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
---
 .../LoadingBar/LoadingBar.story.tsx           |  3 +-
 .../src/components/LoadingBar/LoadingBar.tsx  | 52 +++++++++----------
 .../components/PanelChrome/PanelChrome.tsx    |  4 +-
 3 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.story.tsx b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.story.tsx
index f839a8d71a0..20d57c0e601 100644
--- a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.story.tsx
+++ b/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',
-  height: '2px',
+  width: 400,
 };
 
 export default meta;
diff --git a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
index b576d22d728..071af2ecec2 100644
--- a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
+++ b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
@@ -1,48 +1,46 @@
 import { css, keyframes } from '@emotion/css';
-import React from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
+import React, { CSSProperties } from 'react';
 
 import { useStyles2 } from '../../themes';
 
 export interface LoadingBarProps {
-  width?: string;
-  height?: string;
+  width: number;
   ariaLabel?: string;
 }
 
-export function LoadingBar({ width, height, ariaLabel = 'Loading bar' }: LoadingBarProps) {
-  const styles = useStyles2(getStyles(width, height));
+const MILLISECONDS_PER_PIXEL = 2.4;
+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 barWidth = width ?? '128px';
-  const loadingHeigth = height ?? '2px';
-
-  const loadingAnimation = keyframes({
-    '0%': {
-      transform: 'translateX(0)',
-    },
-    '100%': {
-      transform: `translateX(100%)`,
-    },
-  });
-
+const getStyles = () => {
   return {
-    container: css({
-      width: '100%',
-      animation: `${loadingAnimation} 1s infinite linear`,
-      willChange: 'transform',
+    animation: keyframes({
+      '0%': {
+        transform: 'translateX(-50%)',
+      },
+      '100%': {
+        transform: `translateX(100%)`,
+      },
     }),
     bar: css({
-      width: barWidth,
-      height: loadingHeigth,
+      width: '28%',
+      height: 1,
       background: 'linear-gradient(90deg, rgba(110, 159, 255, 0) 0%, #6E9FFF 80.75%, rgba(110, 159, 255, 0) 100%)',
     }),
   };
diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
index e4d8fabf324..6aa4c368886 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+++ b/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 ? (
-          <LoadingBar width={'28%'} height={'2px'} ariaLabel="Panel loading bar" />
-        ) : null}
+        {loadingState === LoadingState.Loading ? <LoadingBar width={width} ariaLabel="Panel loading bar" /> : null}
       </div>
 
       {(hoverHeader || !hasHeader) && menu && (