개발 초기 아이템 리스트 스켈레톤 로더 구현하기

스크린샷

코드

// 스켈레톤 컴포넌트
// 이후에 가져올 데이터가 렌더링 될 크기와 동일하게 맞춘다

import React from 'react';

const SkeletonLoader: React.FC = () => {
    return (
        <div className="min-w-[200px] h-[75px] mx-1 rounded border border-gray-200 shadow-md animate-pulse">
            <div className="flex items-center w-[120px] h-full">
                <div className="flex-shrink-0 w-[75px] h-[75px] bg-gray-300 rounded"></div>
                <div className="ml-2 flex flex-col space-y-2">
                    <span className="text-xs font-bold text-gray-300 w-24 h-4 bg-gray-300 rounded"></span>
                    <div className="text-m font-bold space-y-2">
                        <span className="block w-12 h-4 bg-gray-300 rounded"></span>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default SkeletonLoader;

 

위 스켈레톤을 isLoading이나 isPending 등의 값을 반환 받거나 api route에서 로직을 직접 제작해서 로딩일 때 불러오도록 표현식을 작성해서 호출하면 된다.