create grafana/ui LoadingBar and set it up in Storybook

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

@@ -0,0 +1,8 @@
+import { Meta, Preview, Props } from '@storybook/addon-docs/blocks';
+import { LoadingBar } from './LoadingBar';
+
+<Meta title="MDX|LoadingBar" component={LoadingBar} />
+
+# LoadingBar
+
+The LoadingBar is used as a simple loading slider animation in the top of its container.

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

@@ -1,9 +1,11 @@
-import { action } from '@storybook/addon-actions';
+import { css } from '@emotion/css';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import React, { CSSProperties, useState, ReactNode } from 'react';
+import React from 'react';
 
-import { LoadingBar, LoadingBarProps } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { LoadingBar, LoadingBarProps, useStyles2 } from '@grafana/ui';
 
+import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 const meta: ComponentMeta<typeof LoadingBar> = {
@@ -16,23 +18,29 @@ const meta: ComponentMeta<typeof LoadingBar> = {
   },
 };
 
-function getContentStyle(): CSSProperties {
+const getStyles = (theme: GrafanaTheme2) => {
+  const { borderColor } = theme.components.panel;
+
   return {
-    backgroundColor: '#181B1F',
-    width: '400px',
-    height: '200px',
-    border: '1px solid rgba(204, 204, 220, 0.25)',
-    borderRadius: '1px',
+    container: css({
+      label: 'placeholder-container',
+      width: '400px',
+      height: '200px',
+      border: `1px solid ${borderColor}`,
+      borderRadius: '3px',
+    }),
   };
-}
+};
 
 export const Basic: ComponentStory<typeof LoadingBar> = (args: LoadingBarProps) => {
-  const contentStyle = getContentStyle();
+  const styles = useStyles2(getStyles);
 
   return (
-    <div style={contentStyle}>
-      <LoadingBar {...args} />
-    </div>
+    <DashboardStoryCanvas>
+      <div className={styles.container}>
+        <LoadingBar {...args} />
+      </div>
+    </DashboardStoryCanvas>
   );
 };
 

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

@@ -1,10 +1,6 @@
 import { css, keyframes } from '@emotion/css';
 import React from 'react';
 
-import { GrafanaTheme2 } from '@grafana/data';
-
-import { useTheme2 } from '../../themes';
-
 /**
  * @internal
  */
@@ -13,19 +9,18 @@ export interface LoadingBarProps {
   width?: number;
   height?: number;
   ariaLabel?: string;
-  barColor?: string;
 }
 
 /**
  * @internal
  */
 export const LoadingBar: React.FC<LoadingBarProps> = ({ containerWidth, width, height, ariaLabel = 'Loading bar' }) => {
-  const loadingStyles = getLoadingStyes(containerWidth, width, height);
+  const loadingStyles = getLoadingStyles(containerWidth, width, height);
+
   return <div aria-label={ariaLabel} className={loadingStyles.loading}></div>;
 };
 
-const getLoadingStyes = (containerWidth: number, width?: number, height?: number) => {
-  const theme = useTheme2();
+const getLoadingStyles = (containerWidth: number, width?: number, height?: number) => {
   const loadingWidth = width ?? 128;
   const loadingAnimation = keyframes({
     '0%': {
@@ -38,8 +33,8 @@ const getLoadingStyes = (containerWidth: number, width?: number, height?: number
   return {
     loading: css({
       width: `${loadingWidth}px`,
-      height: `${height ?? 2}ipx`,
-      background: `linear-gradient(90deg, rgba(110, 159, 255, 0) 0%, ${theme.palette.blueLight} 80.75%, rgba(110, 159, 255, 0) 100%)`,
+      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',