@sinchsmb/ui-kit/src/components/Skeleton/styled.ts

UI kit for SinchSMB frontend

import styled, { css, keyframes } from 'styled-components/macro';

import { color, radius } from '../../theme';
import { assertUnreachable } from '../../utils/assertUnreachable';

import { SkeletonVariant } from './constants';

interface StyledSkeletonProps {
  $variant: SkeletonVariant;
}

const animation = keyframes`
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
`;

function borderRadius(options: StyledSkeletonProps) {
  switch (options.$variant) {
    case SkeletonVariant.Square:
      return css`
        border-radius: 0;
      `;
    case SkeletonVariant.Rounded:
      return css`
        border-radius: ${radius('comp/skeleton/rounded/radius')};
      `;
    case SkeletonVariant.Circle:
      return css`
        border-radius: 9999px;
      `;
    /* istanbul ignore next */
    default:
      assertUnreachable(options.$variant);
  }
}

export const StyledSkeleton = styled.div<StyledSkeletonProps>`
  @mixin ${borderRadius};

  background: ${color('comp/skeleton/background')};
  cursor: progress;
  height: 10px;

  /*
    Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196
    Solution from https://github.com/mui/material-ui/blob/4e5e2a7a4634bd13636fe22c8acf0605f71c08a9/packages/mui-material/src/Skeleton/Skeleton.js#L130
  */
  mask-image: radial-gradient(white, black);

  overflow: hidden;
  position: relative;

  &:before {
    animation: ${animation} 2s linear infinite;
    background: ${color('comp/skeleton/gradient')};
    content: '';
    inset: 0;
    position: absolute;
    transform: translateX(-100%);
  }
`;