dashboards squad mob! 🔱

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

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

@@ -0,0 +1,45 @@
+import { action } from '@storybook/addon-actions';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React, { CSSProperties, useState, ReactNode } from 'react';
+
+import { LoadingBar, LoadingBarProps } from '@grafana/ui';
+
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+
+const meta: ComponentMeta<typeof LoadingBar> = {
+  title: 'General/LoadingBar',
+  component: LoadingBar,
+  decorators: [withCenteredStory],
+  parameters: {
+    controls: {},
+    docs: {},
+  },
+};
+
+function getContentStyle(): CSSProperties {
+  return {
+    backgroundColor: '#181B1F',
+    width: '400px',
+    height: '200px',
+    border: '1px solid rgba(204, 204, 220, 0.25)',
+    borderRadius: '1px',
+  };
+}
+
+export const Basic: ComponentStory<typeof LoadingBar> = (args: LoadingBarProps) => {
+  const contentStyle = getContentStyle();
+
+  return (
+    <div style={contentStyle}>
+      <LoadingBar {...args} />
+    </div>
+  );
+};
+
+Basic.args = {
+  width: 128,
+  height: 2,
+  containerWidth: 400,
+};
+
+export default meta;

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

@@ -1,21 +1,17 @@
-import { css } from '@emotion/css';
-import React, { CSSProperties, ReactNode } from 'react';
+import { css, keyframes } from '@emotion/css';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2, useTheme2 } from '../../themes';
-import { IconName } from '../../types/icon';
-import { Dropdown } from '../Dropdown/Dropdown';
-import { Icon } from '../Icon/Icon';
-import { IconButton, IconButtonVariant } from '../IconButton/IconButton';
-import { PopoverContent, Tooltip } from '../Tooltip';
+import { useTheme2 } from '../../themes';
 
 /**
  * @internal
  */
 export interface LoadingBarProps {
-  width: number;
-  height: number;
+  containerWidth: number;
+  width?: number;
+  height?: number;
   ariaLabel?: string;
   barColor?: string;
 }
@@ -24,25 +20,41 @@ export interface LoadingBarProps {
  * @internal
  */
 export const LoadingBar: React.FC<LoadingBarProps> = ({
+  containerWidth,
   width,
   height,
   ariaLabel = 'Loading bar',
   barColor = 'blue',
 }) => {
   const theme = useTheme2();
-  const loadingStyles = getLoadingStyes(theme, width, height)
-  return <div class={loadingStyles.loading}></div>;
+  const loadingStyles = getLoadingStyes(theme, containerWidth, width, height, barColor);
+  return <div className={loadingStyles.loading}></div>;
 };
 
-const getLoadingStyes = (theme: GrafanaTheme2, width, height) => {
+const getLoadingStyes = (
+  theme: GrafanaTheme2,
+  containerWidth: number,
+  width?: number,
+  height?: number,
+  barColor?: string
+) => {
+  const loadingWidth = width ?? 128;
+  const loadingAnimation = keyframes({
+    '0%': {
+      transform: 'translateX(0)',
+    },
+    '100%': {
+      transform: `translateX(${containerWidth - loadingWidth}px)`,
+    },
+  });
   return {
-      loading: css ({
-        width: "80px",
-        height: "10px",
-        backgroundColor: "blue";
-        position: "absolute";
-        animation: animate 1s infinite linear;
-        willChange: transform;:w
-        })
-    };
+    loading: css({
+      width: `${loadingWidth}px`,
+      height: `${height ?? 2}px`,
+      background: 'linear-gradient(90deg, rgba(110, 159, 255, 0) 0%, #6E9FFF 80.75%, rgba(110, 159, 255, 0) 100%)',
+      position: 'absolute',
+      animation: `${loadingAnimation} 2s infinite linear`,
+      willChange: 'transform',
+    }),
+  };
 };

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

@@ -8,6 +8,7 @@ import { IconName } from '../../types/icon';
 import { Dropdown } from '../Dropdown/Dropdown';
 import { Icon } from '../Icon/Icon';
 import { IconButton, IconButtonVariant } from '../IconButton/IconButton';
+import { LoadingBar } from '../LoadingBar/LoadingBar';
 import { PopoverContent, Tooltip } from '../Tooltip';
 
 /**
@@ -88,6 +89,7 @@ export const PanelChrome: React.FC<PanelChromeProps> = ({
 
   return (
     <div className={styles.container} style={containerStyles}>
+      <LoadingBar containerWidth={width} />
       {hasHeader && !hoverHeader && (
         <div className={styles.headerContainer} style={headerStyles} data-testid="header-container">
           {title && (

packages/grafana-ui/src/components/index.ts

@@ -24,6 +24,7 @@ export { ButtonCascader } from './ButtonCascader/ButtonCascader';
 export { InlineToast } from './InlineToast/InlineToast';
 
 export { LoadingPlaceholder, type LoadingPlaceholderProps } from './LoadingPlaceholder/LoadingPlaceholder';
+export { LoadingBar, type LoadingBarProps } from './LoadingBar/LoadingBar';
 export { ColorPicker, SeriesColorPicker } from './ColorPicker/ColorPicker';
 export { ColorPickerInput } from './ColorPicker/ColorPickerInput';
 export { SeriesColorPickerPopover, SeriesColorPickerPopoverWithTheme } from './ColorPicker/SeriesColorPickerPopover';