Loader style

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 <button className={className+' destructive'} onClick={ () => this.remove() }>{ this.props.removeText }</button>
-		}else{
-			return <button className={className} onClick={ () => this.add() }>{ this.props.addText }</button>
+		// 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 <button className={className+' destructive'} onClick={e => this.remove()}>{this.props.removeText}</button>
+		} else {
+			return <button className={className} onClick={e => this.add()}>{this.props.addText}</button>
 		}
 	}
 }
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		load_queue: state.ui.load_queue,
 		spotify_authorized: state.spotify.authorized
 	}
 }

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)

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 {