anthonyatp

const SSkeletonLine = styled(SSkeletonPulse)`
  width: 5.5em;
  border-radius: 5px;

  &::before {
    content: "\00a0";
  }
`;

anthonyatp

<SkeletonLine translucent={true} />

anthonyatp

const SSkeletonPulse = styled.div`
  display: inline-block;
  height: 100%;
  width: 100%;
  background: ${props =>
    props.translucent
      ? css`linear-gradient(-90deg, #C1C1C1 0%, #F8F8F8 50%, #C1C1C1 100%)`
      : css`linear-gradient(-90deg, #F0F0F0 0%, #F8F8F8 50%, #F0F0F0 100%)`};
  background-size: 400% 400%;
  animation: pulse 1.2s ease-in-out infinite;

anthonyatp

if (data === undefined) {
  const profileContent = (
    <Profile>
      <ProfileName><SkeletonLine /></ProfileName>
      <ProfileBio><SkeletonLine /></ProfileBio>
    </Profile>
  );
  } else {
    const profileContent = (
      <Profile>

anthonyatp

export const SkeletonLine = () => (
  <SSkeletonLine />
);

anthonyatp

const SSkeletonPulse = styled.div`
  display: inline-block;
  height: 100%;
  width: 100%;
  background: linear-gradient(-90deg, #F0F0F0 0%, #F8F8F8 50%, #F0F0F0 100%);
  background-size: 400% 400%;
  animation: pulse 1.2s ease-in-out infinite;
  @keyframes pulse {
    0% {
      background-position: 0% 0%;