UI 저장소) Skeleton

Skeleton

자리비움 표시 방법
데이터 로딩중에 사용자가 기다리는 시간을 덜 지루하게 느끼게 하는 트릭

대표적으로 유튜브에서 사용하는 방식,
확실히 그냥 로딩화면을 띄우는 것보다는 세련되어 보인다.

아래는 그냥 연습코드 복붙 해놓은 것

import { useMemo } from 'react';
import styled, { css, keyframes } from 'styled-components';

export default function Skeleton({
  width,
  height,
  circle,
  rounded,
  count,
  color = '#F4F4F4',
  style,
}) {
  //공간을 채우기위한 content 함수
  const content = useMemo(
    () => [...Array({ length: count })].map(() => '-').join(''),
    [count]
  );
  
  return (
    <Base color={color} width={width} height={height}>
      <Content>{content}</Content>
    </Base>
  );
}

const pulseKeyframe = keyframes`
0% {
    opacity: 1;
}
50% {
    opacity: 0.4;
}
100% {
    opacity: 1;
}
`;

const pulseAnimation = css`
  animation: ${pulseKeyframe} 1.5s ease-in-out infinite;
`;

const Base = styled.div`
  ${({ color }) => color && `background-color: ${color}`};
  ${({ rounded }) => rounded && `border-radius: 8px`};
  ${({ circle }) => circle && `border-radius: 50%`};
  ${({ animation }) => animation && pulseAnimation};
  width: ${({ width }) => width && `${width}`};
  height: ${({ height }) => height && `${height}`};
`;

const Content = styled.span`
  opacity: 0;
`;