[Next.js] 이미지 로딩 애니메이션 구현하기

 

이미지를 리스트 형식으로 나열 할때, next.js 의 Image 컴포넌트를 사용하면 이미지를 캐싱 하게됩니다.

문제는 로드와 캐싱되는 시간 동안 사용자는 이미지 대신 비어 있는 공간을 보게됩니다.

 

해당 상황을 방지하기 위해서 로드되는 동안 로딩이 되고 있다는 애니메이션이 보이는 기능을 구현해보겠습니다.

 

코드

import Image from "next/image";

import { useRef } from "react";

export default const Poster = () => {
  const ref = useRef<any>(null);

  return (
    <div>
       <Image
         className="image"
         src="test.png"
         layout="fill"
         onLoadingComplete={() => ref.current.remove()}
       />

      <div className="animation" ref={ref} />
    </div>
  );
}

일단 임시로 Poster 라는 컴포넌트를 하나 만들어 주고, 해당 컴포넌트에는 이미지와 로딩 애니메이션을 먹일 div 태그를 추가해 주었습니다.

 

useRef 을 사용해 애니메이션 객체를 잡아주고, next.js의 Image 컴포넌트의 포함되어 있는 기능인 onLoadingComplete 속성을 사용하여 이미지의 로딩이 끝났을 때 애니메이션 객체를 제거해주는 방식으로 구현해보았습니다.

 

간단하게 구현한 로딩 애니메이션

 .animation {
   width: 42px;
   height: 42px;
   position: absolute;
   left: 50%;
   top: 50%;
   transform-origin: 50%;

   margin-left: -21px;
   margin-top: -21px;
   border-radius: 50%;

   border: 4px solid red;
   border-top-color: transparent;
   border-left-color: transparent;

   animation: Rotate 0.8s infinite linear;
   z-index: 100;
}
 
@keyframes Rotate {
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}