import React from 'react';
import PropTypes from 'prop-types';
import { Button, withStyles } from '@material-ui/core';
import { compose, withState } from 'recompose';

const styles = theme => ({
  loadMoreButton: {
    borderStyle: 'dashed',
    marginTop: theme.spacing.unit * 2,
    width: '100%',
    // Centraliza o botão verticalmente
    marginLeft: 'auto',
    marginRight: 'auto',
    display: 'table',
  },
  [theme.breakpoints.up('sm')]: {
    loadMoreButton: {
      width: '49%',
    },
  },
  [theme.breakpoints.up('md')]: {
    loadMoreButton: {
      maxWidth: '32%',
    },
  },
});

const LoadMoreButton = ({ children, classes, loading, onLoadMore, setLoading }) => {
  return (
    <Button
      onClick={async () => {
        setLoading(true);
        // A função fetchMore() do Apollo Client retorna Promise<ApolloQueryResult>
        await onLoadMore();
        setLoading(false);
      }}
      disabled={loading}
      className={classes.loadMoreButton}
      color="primary"
      size="large"
      variant="outlined"
    >
      {children}
    </Button>
  );
};

LoadMoreButton.propTypes = {
  children: PropTypes.node.isRequired,
  classes: PropTypes.object.isRequired,
  loading: PropTypes.bool.isRequired,
  onLoadMore: PropTypes.func,
  setLoading: PropTypes.func.isRequired,
};

export default compose(
  withState('loading', 'setLoading', false),
  withStyles(styles),
)(LoadMoreButton);

@@ -83,16 +83,34 @@
 thStyles
+, CircularProgress
  %7D from 
@@ -422,16 +422,96 @@
 table',%0A
+    // Fixa a altura, porque o CircularProgress aumenta o bot%C3%A3o%0A    height: 40,%0A
   %7D,%0A  %5B
@@ -1147,16 +1147,59 @@
 %0A      %7B
+loading ? %3CCircularProgress size=%7B22%7D /%3E : 
 children

Add CircularProgress to LoadMoreButton when loading