1import React, { HTMLAttributes, SFC } from 'react';
2import { css, cx } from '@emotion/css';
3import { GrafanaTheme } from '@grafana/data';
4import { Spinner } from '../Spinner/Spinner';
5import { useStyles } from '../../themes';
6
7/**
8 * @public
9 */
10export interface LoadingPlaceholderProps extends HTMLAttributes<HTMLDivElement> {
11  text: string;
12}
13
14/**
15 * @public
16 */
17export const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text, className, ...rest }) => {
18  const styles = useStyles(getStyles);
19  return (
20    <div className={cx(styles.container, className)} {...rest}>
21      {text} <Spinner inline={true} />
22    </div>
23  );
24};
25
26const getStyles = (theme: GrafanaTheme) => {
27  return {
28    container: css`
29      margin-bottom: ${theme.spacing.xl};
30    `,
31  };
32};
33