@grafana/ui/dist/cjs/components/PanelChrome/LoadingIndicator.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var e2eSelectors = require('@grafana/e2e-selectors');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Icon = require('../Icon/Icon.cjs');
var Tooltip = require('../Tooltip/Tooltip.cjs');

"use strict";
const LoadingIndicator = ({ onCancel, loading }) => {
  const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const styles = ThemeContext.useStyles2(getStyles);
  if (!loading) {
    return null;
  }
  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: i18n.t("grafana-ui.panel-chrome.tooltip-cancel-loading", "Cancel query"), children: /* @__PURE__ */ jsxRuntime.jsx(
    Icon.Icon,
    {
      className: css.cx(styles.spin, { [styles.clickable]: !!onCancel }),
      name: prefersReducedMotion ? "hourglass" : "sync",
      size: "sm",
      onClick: onCancel,
      "data-testid": e2eSelectors.selectors.components.LoadingIndicator.icon
    }
  ) });
};
const spin = css.keyframes({
  "0%": {
    transform: "rotate(0deg) scaleX(-1)"
    // scaleX flips the `sync` icon so arrows point the correct way
  },
  "100%": {
    transform: "rotate(359deg) scaleX(-1)"
  }
});
const getStyles = (theme) => {
  return {
    clickable: css.css({
      cursor: "pointer"
    }),
    spin: css.css({
      [theme.transitions.handleMotion("no-preference")]: {
        animation: `${spin} 3s linear infinite`
      }
    })
  };
};

exports.LoadingIndicator = LoadingIndicator;
//# sourceMappingURL=LoadingIndicator.cjs.map