@atlaskit/skeleton/dist/esm/ui/index.js

A skeleton acts as a placeholder for content, usually while the content loads.

/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./index.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 { fg } from '@atlaskit/platform-feature-flags/fg';
var shimmerKeyframes = null;
var skeletonStyles = null;
var activeShimmerStyles = null;

/**
 * `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;

/**
 * __Skeleton__
 *
 * A skeleton acts as a placeholder for content, usually while the content loads.
 *
 * - [Examples](https://atlassian.design/components/skeleton/examples)
 * - [Code](https://atlassian.design/components/skeleton/code)
 */
var Skeleton = function Skeleton(_ref) {
  var width = _ref.width,
    height = _ref.height,
    _ref$borderRadius = _ref.borderRadius,
    borderRadius = _ref$borderRadius === void 0 ? "var(--ds-radius-small, 4px)" : _ref$borderRadius,
    color = _ref.color,
    ShimmeringEndColor = _ref.ShimmeringEndColor,
    _ref$isShimmering = _ref.isShimmering,
    isShimmering = _ref$isShimmering === void 0 ? false : _ref$isShimmering,
    groupName = _ref.groupName,
    interactionName = _ref.interactionName,
    testId = _ref.testId;
  var groupDataAttribute = groupName && "data-".concat(groupName);
  var context = useContext(InteractionContext);
  useLayoutEffect(function () {
    if (context != null && fg('platform-dst-skeleton-ufo-hold')) {
      return context.hold(interactionName);
    }
  }, [context, interactionName]);
  return /*#__PURE__*/React.createElement("div", _extends({
    "data-testid": testId,
    style: {
      width: width,
      height: height,
      borderRadius: borderRadius,
      backgroundColor: color,
      // Override the keyframes if both colors are provided, otherwise use the CSS variable fallbacks in our keyframes
      '--ds-skeleton-from-color': color && ShimmeringEndColor ? color : undefined,
      '--ds-skeleton-to-color': color && ShimmeringEndColor ? ShimmeringEndColor : undefined
    }
  }, groupDataAttribute && _defineProperty({}, groupDataAttribute, 'true'), {
    className: ax(["_7hjf1yy8 _5sag12o8 _tip812c5 _1pglp3kn _bfhkizff", isShimmering && "", isShimmering && "_j7hq1532"])
  }));
};
export default Skeleton;