diff --git a/src/assets/images/ajax-loader.gif b/src/assets/images/ajax-loader.gif new file mode 100644 index 0000000..7e717cd Binary files /dev/null and b/src/assets/images/ajax-loader.gif differ diff --git a/src/js/components/inviteForm.jsx b/src/js/components/inviteForm.jsx index 5018008..0cdeeac 100644 --- a/src/js/components/inviteForm.jsx +++ b/src/js/components/inviteForm.jsx @@ -9,6 +9,7 @@ module.exports = React.createClass({ return { email: '', submitted: false, + sending: false, error: null }; }, @@ -17,6 +18,7 @@ module.exports = React.createClass({ this.setState({ submitted: false, + sending: true, error: null }); @@ -27,10 +29,10 @@ module.exports = React.createClass({ .catch(this.handleError); }, handleSuccess() { - this.setState({submitted: true}); + this.setState({submitted: true, sending: false}); }, handleError(err) { - this.setState({error: err}); + this.setState({error: err, sending: false}); }, onChange(e) { if(e.target.value === this.state.email) { @@ -46,7 +48,8 @@ module.exports = React.createClass({ var formClasses = classSet({ 'invite-form': true, 'has-success': this.state.submitted, - 'has-error': this.state.error + 'has-error': this.state.error, + 'sending': this.state.sending }); var inputClasses = classSet({ @@ -91,6 +94,9 @@ module.exports = React.createClass({ disabled={this.state.error || this.state.submitted}> ⏎ + + {feedbackMessage} ) diff --git a/src/styles/style.styl b/src/styles/style.styl index ec8ec61..0f6add4 100644 --- a/src/styles/style.styl +++ b/src/styles/style.styl @@ -116,6 +116,20 @@ section:first-child color rgba(255, 255, 255, 0.5) &:active border-bottom 0 + .loader + position absolute + right 9px + top 9px + width 0px + height 0px + background transparent url('../images/ajax-loader.gif') no-repeat center center + display block + &.sending + .btn + display none + .loader + width 28px + height 28px @keyframes drop 0%