根据情况禁用颤动中的图标按钮

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

function App() {
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = () => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
    }, 2000); // 模拟加载时间
  };

  return (
    <div>
      <button 
        className={`icon-button ${isLoading ? 'disabled' : ''}`} 
        onClick={handleClick} 
        disabled={isLoading}
      >
        {isLoading ? 'Loading...' : 'Click Me'}
      </button>
    </div>
  );
}

export default App;

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

.icon-button:hover {
  background-color: #0056b3;
}

.icon-button.disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  pointer-events: none; /* 禁用鼠标事件 */
}