[UI] react lazy && skeleton ui

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을 넣었다.

참조

• react lazy, suspense
  https://velog.io/@ansrjsdn/React.lazy-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

• skeleton ui
  https://velog.io/@eunoia/PureCSS%EB%A1%9C-Skeleton-%EC%A0%9C%EC%9E%91%ED%95%98%EA%B8%B0