[UI] react lazy && skeleton ui

Ell!·2021년 12월 8일
0

react

목록 보기
13/28

react의 lazy

사진을 불러올 때, 빈 칸이 생겨서 랜더링을 하면서 요소가 이동한다고 생각해서 그 안에 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을 넣었다.

참조

profile
더 나은 서비스를 고민하는 프론트엔드 개발자.

0개의 댓글