React_Skeleton Loading UI

오늘 했던 것

• styled-component로 skeleton Loading UI 만들기!

결과물

제작 과정

1. styled-component로 skeleton 골격 만들기

// 희미해졌다 선명해졌다 하는 애니메이션
const pulseAni = keyframes`
  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
`;

// skeleton 최상위 div 요소
const SkeletonBox = styled.div`
  width: 300px;
  height: fit-content;
  padding: 1rem;
  background-color: #1f1f1f;
  border-radius: 5px;
  animation: ${pulseAni} 3s ease infinite; // 애니메이션 적용
  position: relative;
`;

// skeleton Title 요소
const SkeletonTitle = styled.div`
  width: 100px;
  height: 50px;
  background-color: silver;
  margin-bottom: 1rem;
  animation: ${pulseAni} 2s ease infinite; // 애니메이션 적용
`;

// skeleton의 No Data가 쓰여지는 요소
const SkeletonText = styled.h2`
  position: absolute;
  top: 15%;
  right: 15%;
  color: white;
  z-index: 1;
`;

// skeleton의 여러 줄을 묶어주는 div 요소
const PragraphContainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
`;

// skeleton의 여러 줄을 표현한 div 요소
const SkeletonParagraph = styled.div`
  width: 100%;
  height: 15px;
  background-color: silver;
  animation: ${pulseAni} 2s ease infinite; // 애니메이션 적용
`;

Skeleton의 컴포넌트 형태

export default function Skeleton() {
  const lineArr = Array(3); // 반복적으로 UI를 생성하기 위한 Array
  return (
    <SkeletonBox>
      <SkeletonTitle />
      <PragraphContainer>
        {[...lineArr].map((el, i) => { // 여러 줄을 표현하는 요소를 반복 생성
          return <SkeletonParagraph key={i} />;
        })}
      </PragraphContainer>
      <SkeletonText>No Data</SkeletonText>
    </SkeletonBox>
  );
}

2. 필요한 곳에 가져다 쓰기

만약 데이터가 없다면 그곳은 skeleton 컴포넌트가 반짝거리고 있다..⭐

// Skeleton 컴포넌트 import
import Skeleton from "../Skeleton/Skeleton";

// MAIN COMPONENT
export default function List() {
  // ReduxState
  const reduxMessages = useSelector((state) => state.messages);

  // 만약 데이터가 없다면 그곳은 skeleton 컴포넌트가 반짝거리고 있다..⭐
  if (reduxMessages?.length === 0) {
    return (
        <MessageContainer>
          <Skeleton />
        </MessageContainer>
    );
  }

느낀점

• 기존에는 단순하게 텍스트로 로딩을 표현했지만,
  간단한 애니메이션이라도 적용된 저런 컴포넌트를 얹어놓으니
  텍스트로 로딩을 표기하는 것보다 UI가 나아진 거 같다.
  생각보다 간단했고 재밌었다.