Add loading spinner to Bid List button (#52)

src/Components/BidListButton/BidListButton.jsx

@@ -23,10 +23,10 @@ class BidListButton extends Component {
   }
 
   toggleSaved() {
-    const { disabled, toggleBidPosition, id } = this.props;
+    const { disabled, toggleBidPosition, id, isLoading } = this.props;
     const { isSaved } = this.getBidData();
     // pass the id and the "remove" param
-    if (!disabled) {
+    if (!isLoading && !disabled) {
       toggleBidPosition(id, isSaved);
     }
   }
@@ -40,13 +40,15 @@ class BidListButton extends Component {
     const style = {
       pointerEvents: this.props.isLoading ? 'none' : 'inherit',
     };
-    const { className, disabled } = this.props;
+    const { className, disabled, isLoading } = this.props;
     const disabled$ = disabled || !canDelete;
     const disabledClass = disabled$ ? 'usa-button-disabled' : '';
     return (
       <button className={`${disabledClass} ${className}`} style={style} onClick={this.toggleSaved} disabled={disabled$}>
         <span className="button-icon">
-          <FontAwesome name={iconClass} />
+          {isLoading ?
+            (<span className="ds-c-spinner spinner-white" />) :
+            (<FontAwesome name={iconClass} />)}
         </span>
         <span>{text}</span>
       </button>

src/Components/BidListButton/BidListButton.test.jsx

@@ -73,6 +73,32 @@ describe('BidListButtonComponent', () => {
     sinon.assert.notCalled(spy);
   });
 
+  it('displays the spinner when isLoading is true', () => {
+    const spy = sinon.spy();
+    const wrapper = shallow(
+      <BidListButton
+        id={1}
+        toggleBidPosition={spy}
+        compareArray={bidListFalse}
+        isLoading
+      />,
+    );
+    expect(wrapper.find('.ds-c-spinner').exists()).toBe(true);
+  });
+
+  it('hides the spinner when isLoading is false', () => {
+    const spy = sinon.spy();
+    const wrapper = shallow(
+      <BidListButton
+        id={1}
+        toggleBidPosition={spy}
+        compareArray={bidListFalse}
+        isLoading={false}
+      />,
+    );
+    expect(wrapper.find('.ds-c-spinner').exists()).toBe(false);
+  });
+
   it('matches snapshot when the user can add the position', () => {
     const wrapper = shallow(
       <BidListButton

src/Containers/BidListButton/BidListButton.jsx

@@ -4,15 +4,22 @@ import { connect } from 'react-redux';
 import { toggleBidPosition } from '../../actions/bidList';
 import BidListButton from '../../Components/BidListButton';
 
-const BidListButtonContainer = ({ toggleBid, ...rest }) => (
-  <BidListButton toggleBidPosition={toggleBid} {...rest} />
+const BidListButtonContainer = ({ toggleBid, isLoading, ...rest }) => (
+  <BidListButton toggleBidPosition={toggleBid} isLoading={isLoading} {...rest} />
 );
 
 BidListButtonContainer.propTypes = {
   toggleBid: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool,
 };
 
-export const mapStateToProps = () => ({});
+BidListButtonContainer.defaultProps = {
+  isLoading: false,
+};
+
+export const mapStateToProps = state => ({
+  isLoading: state.bidListToggleIsLoading,
+});
 
 export const mapDispatchToProps = dispatch => ({
   toggleBid: (id, remove) => dispatch(toggleBidPosition(id, remove)),

src/Containers/BidListButton/BidListButton.test.jsx

@@ -7,6 +7,7 @@ describe('BidListButton', () => {
   const props = {
     toggleBid: () => {},
     id: 1,
+    isLoading: false,
   };
 
   it('is defined', () => {

src/sass/_bidListButton.scss

@@ -5,4 +5,8 @@
     color: $color-white;
     margin-right: 5px;
   }
+
+  .ds-c-spinner {
+    font-size: .1em;
+  }
 }

src/sass/_spinner.scss

@@ -87,7 +87,7 @@
 $favorite-spinner-border-width: 3px;
 $favorite-spinner-size: 14px;
 
-// Favorite's Loading Spinner
+.bid-list-button,
 .favorite-container {
   .ds-c-spinner {
     color: $tm-navy;
@@ -102,7 +102,16 @@ $favorite-spinner-size: 14px;
       width: $favorite-spinner-size;
     }
   }
+}
 
+.bid-list-button {
+  .ds-c-spinner {
+    color: $color-white;
+  }
+}
+
+// Favorite's Loading Spinner
+.favorite-container {
   &.usa-button {
     .ds-c-spinner {
       // scss-lint:disable PseudoElement