사용자 경험을 위한 스켈레톤 적용기

요즘 대부분 웹/모바일 어플리케이션에 접속하게 되면 아래와같이
껍대기 로딩 화면을 먼저 보여주고 이후에 api 요청이 끝나면 해당 페이지 데이터를 뿌려준다
(jira 의 스켈레톤 적용 예제)

초반 스켈레톤 적용시에는 큰문제는 없었다.
초기 화면 렌더링시 스켈레톤 애니메이션을 구현하여 바로 렌더링해주고
api 비동기 요청이 종료되면 스켈레톤을 받은 데이터로 다시 렌더링 해주면 되었다

• Skeleton.js

const Skeleton = styled.div`
	display: inline-block;
	height: 14px;
	width: 80%;
	background-color: #f6f6f6;
	background-image: linear-gradient(90deg, #f6f6f6, #efefef, #f6f6f6);
	background-size: 200px 100%;
	background-repeat: no-repeat;
	border-radius: 4px;
	margin-bottom: 8px;
	margin-top: 0;
	margin: 'none';
	padding: 'none';
	animation: ${skeletonKeyframes} 1300ms ease-in-out infinite;
`;

const Skeleton =()=>{
	return (
   	<Skeleton/>	
       );
}

loading 은 api 비동기 요청이 끝나면 true 가된다
true 가되기 전까진 Skeleton 컴포넌트를 노출한다

하지만 여기서 문제 상황이 발생한다
api 비동기요청 시간이 매우 짧으면 아래와같은 현상이 발생하게된다

요청이 짧기떄문에 스켈레톤이 렌더링 되는동시에 거의 바로 사라져서 사용자 경험이 좋지 않게된다.

문제상황을 해결하기위해 두가지 방법을 생각해봤다

1. 스켈레톤 컴포넌트 감싸는 지연 컴포넌트를 만들어 렌더링 시간을 100ms 지연 시키자
2. 애니메이션을 이용하여 스켈레톤 컴포넌트 렌더링 시간을 지연시키자

두가지 방법중 1번쨰를 선택했고
2번 방법은 다른 게시물에 설명 되있다

컴포넌트렌더링 지연 하기 : https://velog.io/@tkp12345/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%A7%80%EC%97%B0-%ED%95%98%EA%B8%B0

먼저 지연을 위한 커포넌트를 만들어 주었다

• Delay.js

const Delay = ({ children , delayTime = 100}) => {
	
    const[show, setShow] = useState(false);
    
    useEffect(() =>{
    	setTimeout(()=>{
        	setShow(true);
        }, delayTime);
    },[delayTime]);
    return show ? children : null;
}

• 사용방법

	<Delay>
        <컴포넌트 />
	</Delay>

100ms 가지나야 스켈레톤이 렌더링되기 떄문에 순간의 사용자 경험을 향상시킬수
있었다

참고

컴포넌트 렌더링 지연하기 :
https://velog.io/@tkp12345/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%A7%80%EC%97%B0-%ED%95%98%EA%B8%B0