[React] MUI Skeleton 적용하기

프론트엔드를 개발하면서 한 번쯤은 API가 느린 경우를 마주친 적이 있을 것이다.
 
가장 베스트는 API 가 조금이라도 빠른게 좋지만 우선 사용자에게 조금이라도 편안하게 보여주기 위해 
 
Skeleton을 적용했다.
 
우선 적용 전과 적용 후를 보여주겠다.
 

적용 전

 
 
 

적용 후

 
 
확실히 적용하고 난 이후가 훨씬 보기 더 편해진 것을 확인할 수 있다.
 
우선 나는 MUI를 이용했기 때문에, MUI에서 제공하는 Skeleton 컴포넌트를 사용했다.
Skeleton 컴포넌트를 사용하기 전에, Suspense로 한번 감싸줘야 한다.

import React, { Suspense } from 'react';	

return (
	<Suspense fallback={<SkeletonComponent />}>
            <TabInfoComponent />
    	</Suspense>
);


export const SkeletonComponent = () => {
	return (
		<>
			<Tabs variant='fullWidth'>
				<TabSkeleton />
				<TabSkeleton />
			</Tabs>
			<TabPanel
				value={0}
				index={0}>
				<Stack>
					<BoxSkeleton />
					<BoxSkeleton />
				</Stack>
			</TabPanel>
		</>
	);
};

const TabSkeleton = () => {
	return (
		<Tab
			sx={{ flex: 1 }}
			label={
				<Skeleton
					animation='wave'
					sx={{ height: 20, width: 70 }}
				/>
			}
		/>
	);
};

export const BoxSkeleton = () => {
	return (
		<Box>
			<ImageBox>
				<Skeleton
					animation='wave'
					sx={{ height: 100, width: 66}}
				/>
			</ImageBox>
			<Stack>
				<Skeleton
					animation='wave'
					sx={{ height: 80 }}
				/>
			</Stack>
		</Box>
	);
};

Skeleton에서 animation='wave'를 이용하게 되면, 로딩 중인 상황을 더 이쁘게 보여주는 것 같아서 적용했다. 
 
사실 MUI를 이용해서 편하게 적용했지만 처음엔 MUI에서 지원해 주는 게 있는지 모르고 css로 손보고 있었다.