Add loading view while waiting for a result

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",

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 (
+    <div className="row" id="container">
+      <div className="col-md-6 col-md-offset-3">
+        <Loading
+          type="bars"
+          height="100%"
+          width="100%"
+          color="#EBEBEB"
+        />
+      </div>
+    </div>
+  )
+}

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 (<Loader />);
+    }
+
     return (
       <div className="row" id="container">
         <ListPosters

src/public/js/components/shows/details.js

@@ -1,10 +1,15 @@
 import React from 'react'
+import Loader from '../loader/loader'
 
 export default class ShowDetails extends React.Component {
   componentWillMount() {
     this.props.fetchShowDetails(this.props.params.imdbId);
   }
   render() {
+    // Loading
+    if (this.props.showStore.loading) {
+      return (<Loader />);
+    }
     return (
       <div className="row" id="container">
         <Header data={this.props.showStore.show} />

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 (<Loader />);
+    }
+
     return (
       <div className="row" id="container">
         <ListPosters

src/public/js/reducers/movies.js

@@ -1,4 +1,5 @@
 const defaultState = {
+  loading: false,
   movies: [],
   filter: "",
   perPage: 30,
@@ -9,6 +10,10 @@ const defaultState = {
 
 export default function movieStore(state = defaultState, action) {
   switch (action.type) {
+    case 'MOVIE_LIST_FETCH_PENDING':
+      return Object.assign({}, state, {
+        loading: true,
+      })
     case 'MOVIE_LIST_FETCH_FULFILLED':
       let selectedImdbId = "";
       // Select the first movie
@@ -18,10 +23,16 @@ export default function movieStore(state = defaultState, action) {
       return Object.assign({}, state, {
         movies: action.payload.data,
         selectedImdbId: selectedImdbId,
+        loading: false,
+      })
+    case 'SEARCH_MOVIES_PENDING':
+      return Object.assign({}, state, {
+        loading: true,
       })
     case 'SEARCH_MOVIES_FULFILLED':
       return Object.assign({}, state, {
         movies: action.payload.data,
+        loading: false,
       })
     case 'MOVIE_GET_DETAILS_PENDING':
       return Object.assign({}, state, {

src/public/js/reducers/shows.js

@@ -1,4 +1,5 @@
 const defaultState = {
+  loading: false,
   shows: [],
   filter: "",
   perPage: 30,
@@ -11,6 +12,10 @@ const defaultState = {
 
 export default function showStore(state = defaultState, action) {
   switch (action.type) {
+    case 'SHOW_LIST_FETCH_PENDING':
+      return Object.assign({}, state, {
+        loading: true,
+      })
     case 'SHOW_LIST_FETCH_FULFILLED':
       let selectedImdbId = "";
       // Select the first show
@@ -20,15 +25,25 @@ export default function showStore(state = defaultState, action) {
       return Object.assign({}, state, {
         shows: action.payload.data,
         selectedImdbId: selectedImdbId,
+        loading: false,
+      })
+    case 'SHOW_FETCH_DETAILS_PENDING':
+      return Object.assign({}, state, {
+        loading: true,
       })
     case 'SHOW_FETCH_DETAILS_FULFILLED':
       return Object.assign({}, state, {
         show: sortEpisodes(action.payload.data),
+        loading: false,
+      })
+    case 'SEARCH_SHOWS_PENDING':
+      return Object.assign({}, state, {
+        loading: true,
       })
-      return state;
     case 'SEARCH_SHOWS_FULFILLED':
       return Object.assign({}, state, {
         shows: action.payload.data,
+        loading: false,
       })
     case 'SELECT_SHOW':
       // Don't select the show if we're fetching another show's details

yarn.lock

@@ -3081,6 +3081,10 @@ react-dom@^15.3.2:
   version "15.3.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f"
 
+react-loading:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/react-loading/-/react-loading-0.0.9.tgz#e9fba6948915ba7742a508193828b6c73eb04956"
+
 react-overlays@^0.6.10:
   version "0.6.10"
   resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.6.10.tgz#e7e52dad47f00a0fc784eb044428c3a9e874bfa3"