Overview

• React 상에서 Loading 페이지를 만들때 유용하게 사용되는 Spinners의 모음
• Next.js 에서 react-spinner 사용시 Animation이 정상적으로 동작하지 않는 상태
• 결론적으로는 client components에서 사용해야 정상적으로 작동
• Next.js 에서의 react-spinners 사용 관련 설명 Youtube
• https://www.youtube.com/watch?v=uurNrvXbXto&t=300s
• react-spinners Git : https://github.com/davidhu2000/react-spinners

Content

• Spinner Library를 설치 후 그냥 Server Components로 사용하는 경우 정상적으로 Animation이 동작하지 않음

import BeatLoader from "react-spinners/BeatLoader";

export default function Loading() {
    return <>
    <div className="h-full flex flex-col items-center justify-center"> 
        <div className="spinner">
                <BeatLoader
                    color="#3a5df6"
                    speedMultiplier={0.8}
                />
            </div>
        <p className="text-slate-500">Loading...</p>
    </div>
    </>
}

• 아래와 같은 형태로 변화 Spinner가 변화 없는 상태

• Spinner를 별도 client component로 생성 후 생성된 component를 Import 해주시면 정상적으로 Spinner 동작

Spinner.tsx

"use client"
import BeatLoader from "react-spinners/BeatLoader";


const Spinner = () => {
    return (
        <div className="spinner">
            <BeatLoader
                color="#3a5df6"
                speedMultiplier={0.8}
            />
        </div>
    );
}

export default Spinner;

Page.tsx

import Spinner from '@/ui/Spinner'

const AdminPage = () => {
  return (
    <div>
      <Spinner/>
              
    </div>    
    )
}
        
        

• Client Component로 import 시 정상적으로 동작

• 실제 로딩 페이지 적용