@atlaskit/skeleton/dist/es2019/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 "./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';
const shimmerKeyframes = null;
const skeletonStyles = null;
const 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
 */
const 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)
 */
const Skeleton = ({
  width,
  height,
  borderRadius = "var(--ds-radius-small, 4px)",
  color,
  ShimmeringEndColor,
  isShimmering = false,
  groupName,
  interactionName,
  testId
}) => {
  const groupDataAttribute = groupName && `data-${groupName}`;
  const context = useContext(InteractionContext);
  useLayoutEffect(() => {
    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,
      height,
      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 && {
    [groupDataAttribute]: 'true'
  }, {
    className: ax(["_7hjf1yy8 _5sag12o8 _tip812c5 _1pglp3kn _bfhkizff", isShimmering && "", isShimmering && "_j7hq19vq"])
  }));
};
export default Skeleton;