skeleton Skeleton.tsx

0% Statements 0/13

0% Branches 0/2

0% Functions 0/5

0% Lines 0/12

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { ReactElement, useRef } from "react";
import styled from "styled-components";
import useOnScreen from "ui/hooks/use-on-screen";
 
export const SkeletonInput = styled.div`
  background: ${(props) => props.theme.colors.input.background};
  border: 1px solid ${(props) => props.theme.colors.input.border};
  font-size: ${(props) => props.theme.typography.fontSize};
  border-radius: ${(props) => props.theme.borderRadius}px;
  padding: 5px;
  box-sizing: border-box;
  width: 100%;
  height: 28px;
  opacity: 0.3;
`;
 
interface OffscreenSkeletonInputProps {
  children: ReactElement;
}
 
export const OffscreenSkeletonInput = ({
  children,
}: OffscreenSkeletonInputProps) => {
  const ref = useRef<HTMLDivElement>(null);
  const isVisible = useOnScreen(ref);
  return <div ref={ref}>{isVisible ? children : <SkeletonInput />}</div>;
};