diff --git a/src/js/components/FollowButton.js b/src/js/components/FollowButton.js index 3ff47285..cc56ede1 100755 --- a/src/js/components/FollowButton.js +++ b/src/js/components/FollowButton.js @@ -11,11 +11,11 @@ import * as spotifyActions from '../services/spotify/actions' class FollowButton extends React.Component{ constructor(props) { - super(props); + super(props) } componentDidMount(){ - if( this.props.spotify_authorized && this.props.uri ){ + if (this.props.spotify_authorized && this.props.uri){ this.props.spotifyActions.following(this.props.uri) } } @@ -29,21 +29,33 @@ class FollowButton extends React.Component{ } render(){ - if( !this.props.spotify_authorized || !this.props.uri ) return false + if (!this.props.spotify_authorized || !this.props.uri){ + return false + } var className = '' - if (this.props.className) className += ' '+this.props.className - if( this.props.is_following === true ){ - return - }else{ - return + // Inherit passed-down classes + if (this.props.className){ + className += ' '+this.props.className + } + + // Loader + if (helpers.isLoading(this.props.load_queue,['*/following*','/followers*','*/contains*'])){ + className += ' working' + } + + if (this.props.is_following === true){ + return + } else { + return } } } const mapStateToProps = (state, ownProps) => { return { + load_queue: state.ui.load_queue, spotify_authorized: state.spotify.authorized } } diff --git a/src/js/helpers.js b/src/js/helpers.js index 02203cda..47d864f7 100755 --- a/src/js/helpers.js +++ b/src/js/helpers.js @@ -450,6 +450,7 @@ export let setWindowTitle = function (track = false, play_state = false){ * see if any items contain our searched key. * * TODO: Explore performance of this + * TODO: Allow wildcards * * @param load_queue = obj (passed from store) * @param key = string (the string to lookup) diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss index 028771a3..7ad520e3 100755 --- a/src/scss/global/_forms.scss +++ b/src/scss/global/_forms.scss @@ -174,27 +174,15 @@ input[type="submit"] { position: absolute; display: block; content: ''; - background: $mid_grey; + background: rgba(175,175,175,0.2); opacity: 1; animation: slideloader 1s infinite; + top: 0; + right: 0; bottom: 0; left: 0; - right: 0; - height: 4px; z-index: 1; } - - &.destructive:after { - background: $red; - } - - &.primary:after { - background: $turquoise; - } - - &.alternative:after { - background: $blue; - } } &.context-menu-trigger {