[NextJS] 이미지 로딩 애니메이션 구현하기

NextJS는 SSR을 제공하기 때문에 Image 컴포넌트를 사용하면 로딩이 조금 느리게 된다는 것을 체감할 수 있다. 사용자 입장에서는 클릭했는데 아무 변화가 없으니 다시 클릭해야 하나 어쩌나 헷갈릴 수도 있다. 

그래서 간단하게 이미지 로딩 애니메이션을 구현해보기로 했다.

먼저, global.css 파일에 해당 코드를 추가해준다.

 .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 plum;
   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)}
}

그런 다음 이미지 컴포넌트로 인해 로딩이 느려지는 컴포넌트를 찾아 다음과 같이 수정해준다.

import { useRef } from "react";

export default function TestDetails({ test }) {
  const ref = useRef(null);
  
    return (
    <Layout handleReset={setReset}>
      <div className="flex flex-col items-center justify-center sm:mt-2 md:mt-4">
        <div className="mb-6 relative">
          <Image
            src={test.image}
            alt={test.title}
            width={700}
            height={400}
            style={{ width: 700, height: 400 }}
            className="object-cover"
            priority={true}
            onLoadingComplete={() => ref.current.remove()}
          />
          <div className="animation" ref={ref} />
        </div>
        
        ...

그러면 다음과 같이 새로운 테스트를 클릭하여 이미지가 로딩될 때, 다음과 같이 로딩 애니메이션을 볼 수 있다. 당연히 페이지 로딩 속도도 빨라진다.

 

참고한 블로그)

https://gurtn.tistory.com/142

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