Function Skeleton

src/Skeleton.tsx:64–166

({
  count = 1,
  wrapper: Wrapper,

  className: customClassName,
  containerClassName,
  containerTestId,

  circle = false,

  style: styleProp,
  ...originalPropsStyleOptions
}: SkeletonProps)

}

export function Skeleton({
  count = 1,
  wrapper: Wrapper,

  className: customClassName,
  containerClassName,
  containerTestId,

  circle = false,

  style: styleProp,
  ...originalPropsStyleOptions
}: SkeletonProps): ReactElement {
  const contextStyleOptions = React.useContext(SkeletonThemeContext);

  const propsStyleOptions = { ...originalPropsStyleOptions };

  // DO NOT overwrite style options from the context if `propsStyleOptions`
  // has properties explicity set to undefined
  for (const [key, value] of Object.entries(originalPropsStyleOptions)) {
    if (typeof value === 'undefined') {
      delete propsStyleOptions[key as keyof typeof propsStyleOptions];
    }
  }

  // Props take priority over context
  const styleOptions = {
    ...contextStyleOptions,
    ...propsStyleOptions,
    circle,
  };

  // `styleProp` has the least priority out of everything
  const style = {
    ...styleProp,
    ...styleOptionsToCssProperties(styleOptions),
  };

  let className = 'react-loading-skeleton';
  if (customClassName) className += ` ${customClassName}`;

  const inline = styleOptions.inline ?? false;

  const elements: ReactElement[] = [];

  const countCeil = Math.ceil(count);

  for (let i = 0; i < countCeil; i++) {
    let thisStyle = style;

    if (countCeil > count && i === countCeil - 1) {
      // count is not an integer and we've reached the last iteration of
      // the loop, so add a "fractional" skeleton.
      //
      // For example, if count is 3.5, we've already added 3 full
      // skeletons, so now we add one more skeleton that is 0.5 times the
      // original width.