diff --git a/package.json b/package.json
index ead9591..680f3bf 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"react": "^15.3.2",
"react-bootstrap": "^0.30.6",
"react-dom": "^15.3.2",
+ "react-loading": "^0.0.9",
"react-redux": "^4.4.6",
"react-redux-form": "^1.2.4",
"react-router": "^3.0.0",
diff --git a/src/public/js/components/loader/loader.js b/src/public/js/components/loader/loader.js
new file mode 100644
index 0000000..0992754
--- /dev/null
+++ b/src/public/js/components/loader/loader.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import Loading from 'react-loading'
+
+export default function Loader() {
+ return (
+
+ )
+}
diff --git a/src/public/js/components/movies/list.js b/src/public/js/components/movies/list.js
index 111face..d66bffe 100644
--- a/src/public/js/components/movies/list.js
+++ b/src/public/js/components/movies/list.js
@@ -2,6 +2,7 @@ import React from 'react'
import ListPosters from '../list/posters'
import ListDetails from '../list/details'
+import Loader from '../loader/loader'
class MovieButtons extends React.Component {
constructor(props) {
@@ -80,6 +81,12 @@ export default class MovieList extends React.Component {
index = 0;
}
const selectedMovie = movies[index];
+
+ // Loading
+ if (this.props.movieStore.loading) {
+ return ();
+ }
+
return (
);
+ }
return (
diff --git a/src/public/js/components/shows/list.js b/src/public/js/components/shows/list.js
index 0dec71a..8b0703f 100644
--- a/src/public/js/components/shows/list.js
+++ b/src/public/js/components/shows/list.js
@@ -3,6 +3,7 @@ import { Link } from 'react-router'
import ListDetails from '../list/details'
import ListPosters from '../list/posters'
+import Loader from '../loader/loader'
function ShowButtons(props) {
const imdbLink = `http://www.imdb.com/title/${props.show.imdb_id}`;
@@ -47,6 +48,12 @@ export default class ShowList extends React.Component {
index = 0;
}
const selectedShow = shows[index];
+
+ // Loading
+ if (this.props.showStore.loading) {
+ return (
);
+ }
+
return (