Action button (for use with e.g tailwindcss)

ActionButton.js

import React, { useState } from 'react'

const ActionButton = ({ action }) => {
  const [btnState, setBtnState] = useState('idle')

  const doLoad = () => {
    if (btnState === 'idle') {
      setBtnState('loading')
      action().then(() => {
        setBtnState('done')
      })
    }
  }

  return (
    <>
      {btnState === 'idle' ? (
        <IdleButton doLoad={doLoad} />
      ) : btnState === 'loading' ? (
        <LoadingButton />
      ) : (
        <DoneButton />
      )}
    </>
  )
}

const IdleButton = ({ doLoad }) => {
  return (
    <button className="cursor-pointer" onClick={doLoad}>
      Load
    </button>
  )
}

const LoadingButton = () => {
  return <button className="cursor-progress">Loading...</button>
}

const DoneButton = () => {
  return (
    <button className="cursor-not-allowed" disabled>
      Done.
    </button>
  )
}

export default ActionButton

App.js

import React, { useState } from 'react'
import ActionButton from './components/ActionButton'

function App() {
  const btnAction = () => {
    console.log('Started action.')
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log('Done!')
        resolve()
      }, 2000)
    })
  }

  return (
    <>
      <ActionButton action={btnAction} />
    </>
  )
}

export default App