@grafana/ui/dist/esm/components/PanelChrome/LoadingIndicator.mjs.map

Grafana Components Library

{"version":3,"file":"LoadingIndicator.mjs","sources":["../../../../src/components/PanelChrome/LoadingIndicator.tsx"],"sourcesContent":["import { css, cx, keyframes } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\n/**\n * @internal\n */\nexport type LoadingIndicatorProps = {\n  loading: boolean;\n  onCancel: () => void;\n};\n\n/**\n * @internal\n */\nexport const LoadingIndicator = ({ onCancel, loading }: LoadingIndicatorProps) => {\n  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  const styles = useStyles2(getStyles);\n\n  if (!loading) {\n    return null;\n  }\n\n  return (\n    <Tooltip content={t('grafana-ui.panel-chrome.tooltip-cancel-loading', 'Cancel query')}>\n      <Icon\n        className={cx(styles.spin, { [styles.clickable]: !!onCancel })}\n        name={prefersReducedMotion ? 'hourglass' : 'sync'}\n        size=\"sm\"\n        onClick={onCancel}\n        data-testid={selectors.components.LoadingIndicator.icon}\n      />\n    </Tooltip>\n  );\n};\n\nconst spin = keyframes({\n  '0%': {\n    transform: 'rotate(0deg) scaleX(-1)', // scaleX flips the `sync` icon so arrows point the correct way\n  },\n  '100%': {\n    transform: 'rotate(359deg) scaleX(-1)',\n  },\n});\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    clickable: css({\n      cursor: 'pointer',\n    }),\n    spin: css({\n      [theme.transitions.handleMotion('no-preference')]: {\n        animation: `${spin} 3s linear infinite`,\n      },\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA0Ca,SAAU,CAAA;AAAA,EACrB,IAAM,EAAA;AAAA,IACJ,SAAW,EAAA;AAAA;AAAA,GACb;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,SAAW,EAAA;AAAA;AAEf,CAAC"}