make LoadingBar a simple JSX Element; do not use containerWidth; have a wrapper around the loading bar itself;

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

@@ -1,6 +1,10 @@
 import { css, keyframes } from '@emotion/css';
 import React from 'react';
 
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { useStyles2 } from '../../themes';
+
 /**
  * @internal
  */
@@ -14,30 +18,42 @@ export interface LoadingBarProps {
 /**
  * @internal
  */
-export const LoadingBar: React.FC<LoadingBarProps> = ({ containerWidth, width, height, ariaLabel = 'Loading bar' }) => {
-  const loadingStyles = getLoadingStyles(containerWidth, width, height);
+export function LoadingBar({ containerWidth, width, height, ariaLabel = 'Loading bar' }: LoadingBarProps) {
+  const styles = useStyles2(getStyles(containerWidth, width, height));
 
-  return <div aria-label={ariaLabel} className={loadingStyles.loading}></div>;
-};
+  return (
+    <div className={styles.container}>
+      <div aria-label={ariaLabel} className={styles.bar} />
+    </div>
+  );
+}
+
+const getStyles = (_: number, width?: number, height?: number) => (_: GrafanaTheme2) => {
+  const barWidth = width ?? 128;
+  const loadingHeigth = height ?? 2;
 
-const getLoadingStyles = (containerWidth: number, width?: number, height?: number) => {
-  const loadingWidth = width ?? 128;
   const loadingAnimation = keyframes({
     '0%': {
       transform: 'translateX(0)',
     },
     '100%': {
-      transform: `translateX(${containerWidth - loadingWidth}px)`,
+      transform: `translateX(calc(100% - ${barWidth}px))`,
     },
   });
+
   return {
-    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',
+    container: css({
+      width: '100%',
+      height: `${loadingHeigth}px`,
       animation: `${loadingAnimation} 2s infinite linear`,
-      willChange: 'transform',
+      // position: 'absolute',
+      // willChange: 'transform',
+    }),
+    bar: css({
+      width: `${barWidth}px`,
+      height: `${loadingHeigth}px`,
+      background: 'linear-gradient(90deg, rgba(110, 159, 255, 0) 0%, #6E9FFF 80.75%, rgba(110, 159, 255, 0) 100%)',
+      // transform: 'translateX(-100%)',
     }),
   };
 };