Global loader

src/js/components/DebugInfo.js

@@ -13,6 +13,41 @@ class DebugInfo extends React.Component{
 		super(props);
 	}
 
+	renderLoadQueue(){
+		if (!this.props.ui.load_queue){
+			return null
+		}
+
+		var load_queue = this.props.ui.load_queue
+		var queue = []
+
+		return (
+			<div className="item">
+				{queue}
+			</div>
+		)
+	}
+
+	renderLoadQueue(){
+		if (!this.props.ui.load_queue){
+			return null
+		}
+
+		var load_queue = this.props.ui.load_queue
+		var queue = []
+		for (var key in load_queue){
+			if (load_queue.hasOwnProperty(key)){
+				queue.push(<div key={key}>{load_queue[key]}</div>)
+			}
+		}
+
+		return (
+			<div className="item">
+				{queue}
+			</div>
+		)
+	}
+
 	render(){
 		var touch_state = 'no touch'
 		if (this.props.ui.emulate_touch){
@@ -41,6 +76,7 @@ class DebugInfo extends React.Component{
 				<div className="item">
 					{touch_state}
 				</div>
+				{this.renderLoadQueue()}
 			</div>
 		);
 	}

src/js/components/Loader.js

@@ -0,0 +1,35 @@
+
+import React, { PropTypes } from 'react'
+import FontAwesome from 'react-fontawesome'
+
+export default class Loader extends React.Component{
+
+	constructor(props) {
+		super(props)
+	}
+
+	render(){
+		if (!this.props.load_queue){
+			return null
+		}
+
+		var load_queue = this.props.load_queue
+		var is_loading = false
+		for (var key in load_queue){
+			if (load_queue.hasOwnProperty(key)){
+				is_loading = true
+				break
+			}
+		}
+
+		if (is_loading){
+			return (
+				<div className="loader active"></div>
+			)
+		} else {	
+			return (
+				<div className="loader"></div>
+			)
+		}
+	}
+}