try to create skeleton with styled component

SkeletonLoader.tsx

import { FunctionComponent } from "react";
import styled, { keyframes, css } from "styled-components";

const SkeletonLoader: FunctionComponent<{
  isLoading?: boolean;
}> = (props) => {
  return (
    <Content isLoading={props.isLoading}>
      {props.isLoading && <Loader />}
      {props.children}
    </Content>
  );
};

const translateX = keyframes`
    100% {
      transform: translateX(100%);
    }
`;

const Loader = styled.div`
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-image: linear-gradient(
    90deg,
    var(--base-color),
    var(--highlight-color),
    var(--base-color)
  );
  transform: translateX(-100%);

  animation-name: ${translateX};
  animation-direction: var(--animation-direction);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
`;

const Content = styled.div<{ isLoading?: boolean }>`
  ${(props) =>
    props.isLoading &&
    css`
      --base-color: #ebebeb;
      --highlight-color: #f5f5f5;
      --animation-duration: 1.5s;
      --animation-direction: normal;
      --pseudo-element-display: block; /* Enable animation */

      background-color: var(--base-color);
    `}
`;

export default SkeletonLoader;