@atlaskit/spinner/dist/esm/spinner.js

A spinner is an animated spinning icon that lets users know content is being loaded.

/* spinner.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./spinner.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useContext, useEffect, useLayoutEffect as useRealLayoutEffect } from 'react';
import InteractionContext from '@atlaskit/interaction-context';
import { presetSizes } from './constants';
/**
 * Returns the appropriate circle stroke color.
 */
function getStrokeColor(appearance) {
  return appearance === 'inherit' ? "var(--ds-icon-subtle, #505258)" : "var(--ds-icon-inverse, #FFFFFF)";
}
var rotate = null;

/**
 * There are three parts to the load in animation:
 * 1. Accelerated spin
 * 2. Stretch the spinner line
 */
var loadIn = null;
var styles = {
  rotateStyles: "_j7hqsf8s _5sag12kz _tip812c5 _1pgl2qsq _8hrz1h6o",
  loadInStyles: "_j7hq1ky6 _5sag9cwz _1pgl1ytf _1o511hrf",
  wrapperStyles: "_1e0c116y _s7n4nkob",
  circleStyles: "_lswuglyw _7ljx1dhp _1snbbs82 _jcxd7g3v _1tjm1onz"
};

/**
 * `useLayoutEffect` is being used in SSR safe form. On the server, this work doesn’t need to run.
 * `useEffect` is used in-place, because `useEffect` is not run on the server and it matches types
 * which makes things simpler than doing an `isServer` check or a `null` check.
 *
 * @see https://hello.atlassian.net/wiki/spaces/DST/pages/2081696628/DSTDACI-010+-+Interaction+Tracing+hooks+in+DS+components
 */
var useLayoutEffect = typeof window === 'undefined' ? useEffect : useRealLayoutEffect;

/**
 * __Spinner__
 *
 * A spinner is an animated spinning icon that lets users know content is being loaded.
 *
 * - [Examples](https://atlassian.design/components/spinner/examples)
 * - [Code](https://atlassian.design/components/spinner/code)
 * - [Usage](https://atlassian.design/components/spinner/usage)
 */
var Spinner = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Spinner(_ref, ref) {
  var _ref$appearance = _ref.appearance,
    appearance = _ref$appearance === void 0 ? 'inherit' : _ref$appearance,
    _ref$delay = _ref.delay,
    delay = _ref$delay === void 0 ? 0 : _ref$delay,
    interactionName = _ref.interactionName,
    label = _ref.label,
    _ref$size = _ref.size,
    providedSize = _ref$size === void 0 ? 'medium' : _ref$size,
    testId = _ref.testId;
  var size = typeof providedSize === 'number' ? providedSize : presetSizes[providedSize];
  var animationDelay = "".concat(delay, "ms");
  var stroke = getStrokeColor(appearance);
  var context = useContext(InteractionContext);
  useLayoutEffect(function () {
    if (context != null) {
      return context.hold(interactionName);
    }
  }, [context, interactionName]);

  /**
   * The Spinner animation uses a combination of two
   * css animations on two separate elements.
   */
  return /*#__PURE__*/React.createElement("span", {
    "data-testid": testId ? "".concat(testId, "-wrapper") : 'spinner-wrapper'
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    ,
    style: {
      animationDelay: animationDelay,
      width: size,
      height: size
    },
    className: ax([styles.wrapperStyles, styles.rotateStyles])
  }, /*#__PURE__*/React.createElement("svg", {
    height: size,
    width: size,
    viewBox: "0 0 16 16",
    xmlns: "http://www.w3.org/2000/svg",
    "data-testid": testId,
    ref: ref,
    "aria-label": label || undefined,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    style: {
      animationDelay: animationDelay
    },
    role: label ? 'img' : 'none',
    className: ax([styles.loadInStyles])
  }, /*#__PURE__*/React.createElement("circle", {
    cx: "8",
    cy: "8",
    r: "7",
    style: {
      stroke: stroke
    },
    className: ax([styles.circleStyles])
  })));
}));
export default Spinner;