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 {