사진을 불러올 때, 빈 칸이 생겨서 랜더링을 하면서 요소가 이동한다고 생각해서 그 안에 skeleton ui를 넣어주기로 했다.
const Avatar = ({
shape,
width,
height,
border,
url = imageUrl('default.png'),
...arg
}) => {
const env =
process.env.NODE_ENV === 'development'
? process.env.REACT_APP_DEVELOPMENT_API
: process.env.REACT_APP_PRODUCTION_API;
const removeUndefinedUrl =
url === `${env}image/undefined` ? imageUrl('default.png') : url;
const LazyImage = lazy(() => import('components/Reusable/LazyImage'));
// lazy안에 콜백으로 promise가 들어가야 한다.
return (
<Container
shape={shape}
width={width}
height={height}
border={border}
{...arg}
>
<Suspense
fallback={<Skeleton width={width} height={height} shape={shape} />}
> // Suspense를 사용해서 LazyImage가 불러와지는 동안 fallback의 component 보여줌
<LazyImage src={removeUndefinedUrl}></LazyImage>
</Suspense>
</Container>
);
};
// LazyImage.jsx
const LazyImage = ({ src }) => {
return <img src={src} alt="" />;
};
// skeleton
const Skeleton = ({ width, height, shape }) => {
return <Container width={width} height={height} shape={shape}></Container>;
};
여기에 keyframes를 사용해서 animation을 넣었다.