Save 버튼에 loading, done 효과 주기

사용자에게 버튼 클릭이 작업을 수행하고 있음을 시각적으로 알려주는 것이 중요한 경우가 많다. 스켈레톤이나 전체를 덮는 로딩도 많이 사용하지만 필요에 따라서 이렇게 버튼 위에서 로딩을 보여주는 것도 필요했다.

 

내 경우엔 react-icons 을 사용했다. 다음 명령을 사용하여 설치할 수 있다.

npm install react-icons

 

아래는 사용 예시이다. 실제로 api 호출 등 시간 걸리는 걸로 교체하면 된다.

import React, { useState } from 'react';
import { FaSave, FaSpinner, FaCheck } from 'react-icons/fa';

const SaveButton = () => {
  const [loading, setLoading] = useState(false);
  const [done, setDone] = useState(false);

  const handleClick = () => {
    setLoading(true);

    // 실제로 저장하는 작업 수행 (예: API 호출 등)
    setTimeout(() => {
      setLoading(false);
      setDone(true);

      // 2초 후 done 상태 초기화
      setTimeout(() => {
        setDone(false);
      }, 2000);
    }, 2000);
  };

  return (
    <button onClick={handleClick} disabled={loading || done}>
      {loading ? (
        <FaSpinner className="spin" />
      ) : done ? (
        <FaCheck />
      ) : (
        <FaSave />
      )}
    </button>
  );
};

export default SaveButton;

 

버튼 클릭 시 Loading 상태가 되면 로딩 아이콘이 나타나고, 작업이 완료되면 Done 아이콘이 나타난다.