old_contents: import React, { useState, useEffect, useRef, useCallback } from 'react'
  import PropTypes from 'prop-types'
  import styled from 'styled-components'
  import delay from '@zap/utils/delay'
  import Button from './Button'
  import Spinner from './Spinner'
  
  const StyledButton = styled(Button)`
    color: ${props => (props.active ? props.theme.colors.lightningOrange : null)};
    &:hover {
      color: ${props => props.theme.colors.lightningOrange};
    }
  `
  StyledButton.propTypes = {
    active: PropTypes.bool,
  }
  
  const ActionButton = ({ children, hint, onClick, timeout, ...rest }) => {
    const [status, setStatus] = useState(null)
    const buttonRef = useRef()
  
    const triggerAction = useCallback(async () => {
      await onClick()
      await delay(timeout)
      setStatus('done')
    }, [onClick, timeout])
  
    useEffect(() => {
      if (status === 'fetching') {
        triggerAction()
      } else if (status === 'done') {
        buttonRef.current.blur()
      }
    }, [status, triggerAction])
  
    function handleClick() {
      setStatus('fetching')
    }
  
    return (
      <StyledButton
        ref={buttonRef}
        active={status === 'fetching'}
        className="hint--bottom-left"
        data-hint={hint}
        onClick={handleClick}
        size="small"
        variant="secondary"
        {...rest}
      >
        {status === 'fetching' ? <Spinner /> : children}
      </StyledButton>
    )
  }
  
  ActionButton.propTypes = {
    children: PropTypes.node,
    hint: PropTypes.node,
    onClick: PropTypes.func.isRequired,
    timeout: PropTypes.number,
  }
  
  ActionButton.defaultProps = {
    timeout: 1000,
  }
  
  export default ActionButton
  
new_contents: import React, { useState, useEffect, useRef, useCallback } from 'react'
  import PropTypes from 'prop-types'
  import styled from 'styled-components'
  import delay from '@zap/utils/delay'
  import Button from './Button'
  import Spinner from './Spinner'
  
  const StyledButton = styled(Button)`
    color: ${props => (props.active ? props.theme.colors.lightningOrange : null)};
    &:hover {
      color: ${props => props.theme.colors.lightningOrange};
    }
  `
  StyledButton.propTypes = {
    active: PropTypes.bool,
  }
  
  const ActionButton = ({ children, hint, onClick, timeout, ...rest }) => {
    const [status, setStatus] = useState(null)
    const buttonRef = useRef()
  
    const triggerAction = useCallback(async () => {
      await onClick()
      await delay(timeout)
      setStatus('done')
    }, [onClick, timeout])
  
    useEffect(() => {
      if (status === 'fetching') {
        triggerAction()
      } else if (status === 'done') {
        buttonRef.current.blur()
      }
    }, [status, triggerAction])
  
    function handleClick() {
      setStatus('fetching')
    }
  
    return (
      <StyledButton
        ref={buttonRef}
        active={status === 'fetching'}
        className="hint--bottom-left"
        data-hint={hint}
        onClick={handleClick}
        size="small"
        variant="secondary"
        {...rest}
      >
        {status === 'fetching' ? <Spinner height="16px" width="16px" /> : children}
      </StyledButton>
    )
  }
  
  ActionButton.propTypes = {
    children: PropTypes.node,
    hint: PropTypes.node,
    onClick: PropTypes.func.isRequired,
    timeout: PropTypes.number,
  }
  
  ActionButton.defaultProps = {
    timeout: 1000,
  }
  
  export default ActionButton
  
subject: use fixed size Spinner in ActionButton