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 (