Async Loading Button

1function LoadingButton() {
2  const [state, setState] = React.useState('idle');
3  const run = () => {
4    if (state !== 'idle') return;
5    setState('loading');
6    setTimeout(() => setState('done'), 1400);
7    setTimeout(() => setState('idle'), 2800);
8  };
9  const label = { idle: 'Speichern', loading: '', done: 'Gespeichert ✓' }[state];
10  return (
11    <button onClick={run} style={{minWidth:150,padding:'13px 26px',border:0,borderRadius:14,color:'#fff',
12      font:'600 15px system-ui',cursor:'pointer',transition:'background .3s',
13      background: state==='done' ? '#10b981' : 'linear-gradient(135deg,#8b5cf6,#d946ef)'}}>
14      {state==='loading'
15        ? <span style={{display:'inline-block',width:18,height:18,border:'2px solid rgba(255,255,255,.4)',
16            borderTopColor:'#fff',borderRadius:'50%',animation:'sp .7s linear infinite'}} />
17        : label}
18      <style>{'@keyframes sp{to{transform:rotate(360deg)}}'}</style>
19    </button>
20  );
21}