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>
 		)