Loading animations for buttons

src/js/components/SpotifyAuthenticationFrame.js

@@ -66,20 +66,18 @@ class SpotifyAuthenticationFrame extends React.Component{
 	renderAuthorizeButton(){
 		if( this.state.authorizing ){
 			return (
-				<button disabled>
-					<FontAwesome name="circle-o-notch" spin />
-					&nbsp;
+				<button className="working">
 					Authorizing...
 				</button>
-			);
+			)
 		}else if( this.props.authorized ){
 			return (
 				<button className="destructive" onClick={() => this.props.spotifyActions.authorizationRevoked()}>Log out</button>
-			);
+			)
 		}else{
 			return (
 				<button className="primary" onClick={() => this.startAuthorization()}>Log in</button>
-			);
+			)
 		}
 	}
 
@@ -88,9 +86,7 @@ class SpotifyAuthenticationFrame extends React.Component{
 
 		if (this.props.refreshing_token){
 			return (
-				<button disabled>
-					<FontAwesome name="circle-o-notch" spin />
-					&nbsp;
+				<button className="working">
 					Refreshing...
 				</button>
 			);

src/scss/global/_forms.scss

@@ -1,4 +1,12 @@
 
+:focus {
+	outline: none;
+}
+
+::-moz-focus-inner {
+	border: 0;
+}
+
 button,
 textarea,
 input[type="text"],
@@ -159,6 +167,36 @@ input[type="submit"] {
 		}
 	}
 
+	&.working {
+		position: relative;
+
+		&:after {
+			position: absolute;
+			display: block;
+			content: '';
+			background: $mid_grey;
+			opacity: 1;
+		    animation: slideloader 1s infinite;
+			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 {
 		border-color: transparent;
 		padding: 6px;