Placeholder Placeholder.tsx

0% Statements 0/1

100% Branches 0/0

0% Functions 0/1

0% Lines 0/1

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { DetailedHTMLProps, HTMLAttributes, ReactElement } from "react";
 
export default function Placeholder(
  props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
): ReactElement {
  return (
    <span {...props} className="placeholder">
      {props.children}
      <style jsx>{`
        span {
          display: inline-block;
          height: 18px;
          width: calc(100% - 1rem);
          border-radius: 0.25rem;
          background-color: #5e5d5db3;
          animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        @keyframes pulse {
          0% {
            opacity: 0.8;
          }
          50% {
            opacity: 0.5;
          }
          100% {
            opacity: 0.8;
          }
        }
      `}</style>
    </span>
  );
}