Semantic UI promise loader button

promise-loader-button.js

import React, { useState } from 'react'
import { Button } from 'semantic-ui-react'

// action returns a promise after the resolution of which `loading` is set to false
const PromiseButton = ({ action, children, ...props }) => {
  const [loading, setLoading] = useState(false)

  const handleClick = () => {
    setLoading(true)
    action().then(() => {
      setLoading(false)
    })
  }

  return (
    <Button
      {...props}
      onClick={handleClick}
      loading={loading}
      disabled={loading}
    >
      {children}
    </Button>
  )
}

export default PromiseButton