Merge branch 'master' into toc

Author: egardner

app/components/Epub/index.js

@@ -44,14 +44,6 @@ class Epub extends Component {
       }
     });
 
-    this.book.ready.then(() => {
-      if (this.props.onReady) this.props.onReady(this.book);
-    });
-
-    this.book.loaded.metadata.then((nav) => {
-      if (this.props.onMetadataReady) this.props.onMetadataReady(nav.toc);
-    });
-
     this.book.loaded.navigation.then((nav) => {
       if (this.props.onNavigationReady) this.props.onNavigationReady(nav.toc);
     });
@@ -68,8 +60,15 @@ class Epub extends Component {
       }
     };
 
-    this.rendition.on('keyup', this.keyListener);
-    document.addEventListener('keyup', this.keyListener, false);
+    this.book.ready.then(() => {
+      if (this.props.onReady) this.props.onReady(this.book);
+      this.rendition.on('keyup', this.keyListener);
+      document.addEventListener('keyup', this.keyListener, false);
+    });
+
+    this.book.loaded.navigation.then((nav) => {
+      if (this.props.onNavigationReady) this.props.onNavigationReady(nav.toc);
+    });
   }
 
   componentWillUnmount() {

app/components/Loader/Loader.scss

@@ -0,0 +1,17 @@
+.loader__container {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	right: 50%;
+	bottom: 50%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 20px;
+	text-align: center;
+	flex-direction: column;
+
+	> div {
+		padding: 20px 0;
+	}
+}

app/components/Loader/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Spinner from 'react-spinkit';
+import './Loader.scss';
+
+const Loader = () => (
+  <div className="loader__container">
+    Loading
+    <Spinner
+      spinnerName="chasing-dots"
+      noFadeIn
+    />
+  </div>
+);
+
+export default Loader;

app/components/Reader/index.js

@@ -1,24 +1,22 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router';
+import Loader from '../Loader';
 import Epub from '../Epub';
 import getStreamHost from '../../utils/get-stream-host';
 import './Reader.scss';
 
 class Reader extends Component {
   constructor(props) {
     super(props);
-    this.state = {
-      "nav": [],
-      "location" : 0
-    };
+    this.handleReady = this.handleReady.bind(this);
   }
 
   _navigationReady(nav) {
-    this.setState({ nav });
+    this.setState({ ...this.state, nav });
   }
 
   _onNavClick(item) {
-    this.setState({location : item.href })
+    this.setState({ ...this.state, location: item.href });
   }
 
   tocToggle() {
@@ -29,6 +27,17 @@ class Reader extends Component {
     } else {
       navMenu.classList.add('is-visible');
     }
+
+  }
+
+  state = {
+    isLoading: true,
+    nav: [],
+    location : 0
+  };
+
+  handleReady() {
+    this.setState({ ...this.state, isLoading: false });
   }
 
   render() {
@@ -76,6 +85,7 @@ class Reader extends Component {
             </a>
           </div>
         </nav>
+        {this.state.isLoading && <Loader />}
         <Epub
           src={`${getStreamHost()}/${book.id}/${download}/`}
           onNavigationReady={ this._navigationReady.bind(this) }

package.json

@@ -147,6 +147,7 @@
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-router": "^3.0.2",
+    "react-spinkit": "^2.0.0",
     "sass-loader": "^5.0.1",
     "source-map-support": "^0.4.10"
   },

webpack.config.base.js

@@ -9,6 +9,10 @@ import { dependencies as externals } from './app/package.json';
 export default validate({
   module: {
     loaders: [{
+      test: /\.css$/,
+      loader: 'style!css'
+    },
+    {
       test: /\.jsx?$/,
       loaders: ['babel-loader'],
       exclude: /node_modules/

yarn.lock

@@ -1616,7 +1616,7 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
-classnames@^2.2.5:
+classnames@^2.2.3, classnames@^2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
 
@@ -5250,6 +5250,13 @@ react-router@^3.0.2:
     loose-envify "^1.2.0"
     warning "^3.0.0"
 
+react-spinkit@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-spinkit/-/react-spinkit-2.0.0.tgz#1b010bc69f54bc2bdfa7587fcbab44c249bebdbe"
+  dependencies:
+    classnames "^2.2.3"
+    object-assign "^4.1.0"
+
 react-transform-catch-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-transform-catch-errors/-/react-transform-catch-errors-1.0.2.tgz#1b4d4a76e97271896fc16fe3086c793ec88a9eeb"