带有加载微调器的React TypeScript按钮

import React, { useState } from 'react';
import './LoadingButton.css';

interface LoadingButtonProps {
  onClick: () => Promise<void>;
  label: string;
}

const LoadingButton: React.FC<LoadingButtonProps> = ({ onClick, label }) => {
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = async () => {
    setIsLoading(true);
    try {
      await onClick();
    } catch (error) {
      console.error('Error:', error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <button className={`loading-button ${isLoading ? 'loading' : ''}`} onClick={handleClick}>
      {isLoading ? (
        <div className="spinner"></div>
      ) : (
        label
      )}
    </button>
  );
};

export default LoadingButton;

.loading-button {
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.loading-button.loading {
  pointer-events: none;
  opacity: 0.6;
}

.spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}