Added a loading image to pirateSearch. Now we get feedback when waiting for response from the api.

client/app/components/admin/PirateSearch.jsx

@@ -1,18 +1,25 @@
 import React, { Component } from 'react';
 import { fetchJSON } from '../http.jsx'; 
 
+// Stylesheets
+import btnStylesheet from '../styles/buttons.jsx';
+
+// Interactive button
+import Interactive from 'react-interactive';
+
+import Loading from '../images/loading.jsx'
+
 class PirateSearch extends Component {
 	constructor() {
 		super();
 		this.state = {
 			response: [],
 			name: '',
+			loading: '',
 		}
 	}
 
 	sendToDownload(torrent) {
-		console.log(torrent.magnet)
-
 		let data = {magnet: torrent.magnet}
 		fetchJSON('https://apollo.kevinmidboe.com/api/v1/pirate/add', 'POST', data)
 		.then((response) => {
@@ -24,10 +31,15 @@ class PirateSearch extends Component {
 		const query = this.props.name;
 		const type = this.props.type;
 
+		this.setState({
+			loading: <Loading />
+		})
+
 		fetchJSON('https://apollo.kevinmidboe.com/api/v1/pirate/search?query='+query+'&type='+type, 'GET')
 		.then((response) => {
 			console.log(response.torrents)
 			this.setState({
+				loading: '',
 				response: response.torrents.map((torrent, index) => {
 					return (
 						<div key={index}>
@@ -46,8 +58,20 @@ class PirateSearch extends Component {
 	render() {
 		return (
 			<div>
-				<span>{this.props.name}</span>
-				<button onClick={() => {this.searchTheBay(this)}}>Load shit</button>
+				<div>
+				<Interactive 
+					as='button'
+					onClick={() => {this.searchTheBay()}}
+					style={btnStylesheet.submit}
+					focus={btnStylesheet.submit_hover}
+					hover={btnStylesheet.submit_hover}>
+					
+					<span style={{whiteSpace: 'nowrap'}}>Search for torrents</span>
+				</Interactive>
+				</div>
+
+				{ this.state.loading }
+				
 				<span>{this.state.response}</span>
 			</div>
 		)

client/app/components/images/loading.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+function Loading() {
+   return (
+      <div style={{textAlign: 'center'}}>
+         <svg version="1.1" 
+            style={{height: '75px'}} 
+            xmlns="http://www.w3.org/2000/svg" 
+            x="0px" 
+            y="0px"
+            viewBox="0 0 80 80">
+            <path
+               fill="#e9a131" 
+               d="M40,72C22.4,72,8,57.6,8,40C8,22.4,
+               22.4,8,40,8c17.6,0,32,14.4,32,32c0,1.1-0.9,2-2,2
+               s-2-0.9-2-2c0-15.4-12.6-28-28-28S12,24.6,12,40s12.6,
+               28,28,28c1.1,0,2,0.9,2,2S41.1,72,40,72z">
+
+               <animateTransform
+                  attributeType="xml"
+                  attributeName="transform"
+                  type="rotate"
+                  from="0 40 40"
+                  to="360 40 40"
+                  dur="1.0s"
+                  repeatCount="indefinite"/>
+            </path>
+         </svg>
+      </div>
+
+   )
+}
+
+export default Loading;

client/app/components/images/loading.svg

@@ -0,0 +1,7 @@
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="256" width="1020" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+
+<path 
+fill="#d178de" d="M10,40c0,0,0-0.4,0-1.1c0-0.3,0-0.8,0-1.3c0-0.3,0-0.5,0-0.8c0-0.3,0.1-0.6,0.1-0.9c0.1-0.6,0.1-1.4,0.2-2.1 c0.2-0.8,0.3-1.6,0.5-2.5c0.2-0.9,0.6-1.8,0.8-2.8c0.3-1,0.8-1.9,1.2-3c0.5-1,1.1-2,1.7-3.1c0.7-1,1.4-2.1,2.2-3.1 c1.6-2.1,3.7-3.9,6-5.6c2.3-1.7,5-3,7.9-4.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.3,1.5-0.3,2.3-0.5c0.8-0.2,1.5-0.3,2.3-0.4l1.2-0.1 l0.6-0.1l0.3,0l0.1,0l0.1,0l0,0c0.1,0-0.1,0,0.1,0c1.5,0,2.9-0.1,4.5,0.2c0.8,0.1,1.6,0.1,2.4,0.3c0.8,0.2,1.5,0.3,2.3,0.5 c3,0.8,5.9,2,8.5,3.6c2.6,1.6,4.9,3.4,6.8,5.4c1,1,1.8,2.1,2.7,3.1c0.8,1.1,1.5,2.1,2.1,3.2c0.6,1.1,1.2,2.1,1.6,3.1 c0.4,1,0.9,2,1.2,3c0.3,1,0.6,1.9,0.8,2.7c0.2,0.9,0.3,1.6,0.5,2.4c0.1,0.4,0.1,0.7,0.2,1c0,0.3,0.1,0.6,0.1,0.9 c0.1,0.6,0.1,1,0.1,1.4C74,39.6,74,40,74,40c0.2,2.2-1.5,4.1-3.7,4.3s-4.1-1.5-4.3-3.7c0-0.1,0-0.2,0-0.3l0-0.4c0,0,0-0.3,0-0.9 c0-0.3,0-0.7,0-1.1c0-0.2,0-0.5,0-0.7c0-0.2-0.1-0.5-0.1-0.8c-0.1-0.6-0.1-1.2-0.2-1.9c-0.1-0.7-0.3-1.4-0.4-2.2 c-0.2-0.8-0.5-1.6-0.7-2.4c-0.3-0.8-0.7-1.7-1.1-2.6c-0.5-0.9-0.9-1.8-1.5-2.7c-0.6-0.9-1.2-1.8-1.9-2.7c-1.4-1.8-3.2-3.4-5.2-4.9 c-2-1.5-4.4-2.7-6.9-3.6c-0.6-0.2-1.3-0.4-1.9-0.6c-0.7-0.2-1.3-0.3-1.9-0.4c-1.2-0.3-2.8-0.4-4.2-0.5l-2,0c-0.7,0-1.4,0.1-2.1,0.1 c-0.7,0.1-1.4,0.1-2,0.3c-0.7,0.1-1.3,0.3-2,0.4c-2.6,0.7-5.2,1.7-7.5,3.1c-2.2,1.4-4.3,2.9-6,4.7c-0.9,0.8-1.6,1.8-2.4,2.7 c-0.7,0.9-1.3,1.9-1.9,2.8c-0.5,1-1,1.9-1.4,2.8c-0.4,0.9-0.8,1.8-1,2.6c-0.3,0.9-0.5,1.6-0.7,2.4c-0.2,0.7-0.3,1.4-0.4,2.1 c-0.1,0.3-0.1,0.6-0.2,0.9c0,0.3-0.1,0.6-0.1,0.8c0,0.5-0.1,0.9-0.1,1.3C10,39.6,10,40,10,40z">
+<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 40 40" to="360 40 40" dur="0.6s" repeatCount="indefinite"/>
+</path>
+</svg>