fix wrapper around LoadingBar: willChange css prop makes performance of rerendering better

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

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

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

@@ -9,17 +9,16 @@ import { useStyles2 } from '../../themes';
  * @internal
  */
 export interface LoadingBarProps {
-  containerWidth: number;
-  width?: number;
-  height?: number;
+  width?: string;
+  height?: string;
   ariaLabel?: string;
 }
 
 /**
  * @internal
  */
-export function LoadingBar({ containerWidth, width, height, ariaLabel = 'Loading bar' }: LoadingBarProps) {
-  const styles = useStyles2(getStyles(containerWidth, width, height));
+export function LoadingBar({ width, height, ariaLabel = 'Loading bar' }: LoadingBarProps) {
+  const styles = useStyles2(getStyles(width, height));
 
   return (
     <div className={styles.container}>
@@ -28,32 +27,29 @@ export function LoadingBar({ containerWidth, width, height, ariaLabel = 'Loading
   );
 }
 
-const getStyles = (_: number, width?: number, height?: number) => (_: GrafanaTheme2) => {
-  const barWidth = width ?? 128;
-  const loadingHeigth = height ?? 2;
+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(calc(100% - ${barWidth}px))`,
+      transform: `translateX(calc(100% - ${barWidth}))`,
     },
   });
 
   return {
     container: css({
       width: '100%',
-      height: `${loadingHeigth}px`,
       animation: `${loadingAnimation} 2s infinite linear`,
-      // position: 'absolute',
-      // willChange: 'transform',
+      willChange: 'transform',
     }),
     bar: css({
-      width: `${barWidth}px`,
-      height: `${loadingHeigth}px`,
+      width: barWidth,
+      height: loadingHeigth,
       background: 'linear-gradient(90deg, rgba(110, 159, 255, 0) 0%, #6E9FFF 80.75%, rgba(110, 159, 255, 0) 100%)',
-      // transform: 'translateX(-100%)',
     }),
   };
 };