PluginList: Add plugin list loading skeleton (#79012)

* add plugin skeleton

* lineHeight: 1 instead of 0

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

@@ -1,5 +1,6 @@
 import { css, cx } from '@emotion/css';
 import React, { HTMLAttributes } from 'react';
+import Skeleton from 'react-loading-skeleton';
 import tinycolor from 'tinycolor2';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -18,7 +19,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
   tooltip?: string;
 }
 
-export const Badge = React.memo<BadgeProps>(({ icon, color, text, tooltip, className, ...otherProps }) => {
+const BadgeComponent = React.memo<BadgeProps>(({ icon, color, text, tooltip, className, ...otherProps }) => {
   const styles = useStyles2(getStyles, color);
   const badge = (
     <div className={cx(styles.wrapper, className)} {...otherProps}>
@@ -35,8 +36,27 @@ export const Badge = React.memo<BadgeProps>(({ icon, color, text, tooltip, class
     badge
   );
 });
+BadgeComponent.displayName = 'Badge';
 
-Badge.displayName = 'Badge';
+const BadgeSkeleton = () => {
+  const styles = useStyles2(getSkeletonStyles);
+
+  return <Skeleton width={60} height={22} containerClassName={styles.container} />;
+};
+
+interface BadgeWithSkeleton extends React.NamedExoticComponent<BadgeProps> {
+  Skeleton: typeof BadgeSkeleton;
+}
+
+export const Badge: BadgeWithSkeleton = Object.assign(BadgeComponent, { Skeleton: BadgeSkeleton });
+
+Badge.Skeleton = BadgeSkeleton;
+
+const getSkeletonStyles = () => ({
+  container: css({
+    lineHeight: 1,
+  }),
+});
 
 const getStyles = (theme: GrafanaTheme2, color: BadgeColor) => {
   let sourceColor = theme.visualization.getColorByName(color);