busy_btn.jsx

import React, { Component, PropTypes } from 'react';
import Button from 'grommet/components/Button';
import Spinning from 'grommet/components/icons/Spinning';

import './styles.scss';

export const SimpleBusyButton = ({ enabled, primary, ...props }) => {
  const onClick = enabled ? props.onClick : undefined;
  const icon = enabled ? props.icon : <Spinning />;

  return (
    <Button
      {...props}
      className="busybtn"
      onClick={onClick}
      icon={icon}
      primary={enabled && !!primary}
    />
  );
};

SimpleBusyButton.propTypes = {
  enabled: PropTypes.bool.isRequired,
};

export default class BusyButton extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = { clicked: false };
    this.onClick = this.onClick.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.error !== this.props.error) {
      this.setState({ clicked: false });
    }
  }

  onClick(e) {
    this.setState({ clicked: true });
    this.props.onClick(e);
  }

  render() {
    const { error, ...props } = this.props;
    // Do nothing with error here...
    return (
      <SimpleBusyButton {...props} onClick={this.onClick} enabled={!this.state.clicked} />
    );
  }
}