2 files changed, 130 insertions, 3 deletions
diff --git a/packages/gitbook-plugin-theme-default/src/components/LoadingBar.js b/packages/gitbook-plugin-theme-default/src/components/LoadingBar.js
new file mode 100644
index 0000000..11e1ddb
--- /dev/null
+++ b/packages/gitbook-plugin-theme-default/src/components/LoadingBar.js
@@ -0,0 +1,124 @@
+const GitBook = require('gitbook-core');
+const { React } = GitBook;
+
+/**
+ * Displays a progress bar (YouTube-like) at the top of container
+ * Based on https://github.com/lonelyclick/react-loading-bar/blob/master/src/Loading.jsx
+ */
+const LoadingBar = React.createClass({
+    propTypes: {
+        show:  React.PropTypes.bool
+    },
+
+    getDefaultProps() {
+        return {
+            show: false
+        };
+    },
+
+    getInitialState() {
+        return {
+            size: 0,
+            disappearDelayHide: false, // when dispappear, first transition then display none
+            percent: 0,
+            appearDelayWidth: 0 // when appear, first display block then transition width
+        };
+    },
+
+    componentWillReceiveProps(nextProps) {
+        const { show } = nextProps;
+
+        if (show) {
+            this.show();
+        } else {
+            this.hide();
+        }
+    },
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return true; // !shallowEqual(nextState, this.state)
+    },
+
+    show() {
+        let { size, percent } = this.state;
+
+        const appearDelayWidth = size === 0;
+        percent = calculatePercent(percent);
+
+        this.setState({
+            size: ++size,
+            appearDelayWidth,
+            percent
+        });
+
+        if (appearDelayWidth) {
+            setTimeout(() => {
+                this.setState({
+                    appearDelayWidth: false
+                });
+            });
+        }
+    },
+
+    hide() {
+        let { size } = this.state;
+
+        if (--size < 0) {
+            this.setState({ size: 0 });
+            return;
+        }
+
+        this.setState({
+            size: 0,
+            disappearDelayHide: true,
+            percent: 1
+        });
+
+        setTimeout(() => {
+            this.setState({
+                disappearDelayHide: false,
+                percent: 0
+            });
+        }, 500);
+    },
+
+    getBarStyle() {
+        const { disappearDelayHide, appearDelayWidth, percent } = this.state;
+
+        return {
+            width: appearDelayWidth ? 0 : percent * 100 + '%',
+            display: disappearDelayHide || percent > 0 ? 'block' : 'none'
+        };
+    },
+
+    getShadowStyle() {
+        const { percent, disappearDelayHide } = this.state;
+
+        return {
+            display: disappearDelayHide || percent > 0 ? 'block' : 'none'
+        };
+    },
+
+    render() {
+        return (
+            <div className="LoadingBar">
+                <div className="LoadingBar-Bar" style={this.getBarStyle()}>
+                    <div className="LoadingBar-Shadow"
+                         style={this.getShadowStyle()}>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
+
+function calculatePercent(percent) {
+    percent = percent || 0;
+
+    // How much of remaining bar we advance
+    const progress = 0.1 + Math.random() * 0.3;
+
+    return percent + progress * (1 - percent);
+}
+
+module.exports = LoadingBar;
diff --git a/packages/gitbook-plugin-theme-default/src/components/Theme.js b/packages/gitbook-plugin-theme-default/src/components/Theme.js
index bf00502..741b3cc 100644
--- a/packages/gitbook-plugin-theme-default/src/components/Theme.js
+++ b/packages/gitbook-plugin-theme-default/src/components/Theme.js
@@ -3,6 +3,7 @@ const { React } = GitBook;
 
 const Sidebar = require('./Sidebar');
 const Body = require('./Body');
+const LoadingBar = require('./LoadingBar');
 
 const Theme = React.createClass({
     propTypes: {
@@ -10,16 +11,18 @@ const Theme = React.createClass({
         page:     GitBook.Shapes.Page,
         summary:  GitBook.Shapes.Summary,
         readme:   GitBook.Shapes.Readme,
+        history:  GitBook.Shapes.History,
         sidebar:  React.PropTypes.object,
         // Other props
         children: React.PropTypes.node
     },
 
     render() {
-        const { page, summary, children, sidebar, readme } = this.props;
+        const { page, summary, children, sidebar, readme, history } = this.props;
 
         return (
             <GitBook.FlexLayout column className="GitBook book">
+                <LoadingBar show={history.loading} />
                 <GitBook.Head
                     title={page.title}
                     titleTemplate="%s - GitBook" />
@@ -43,6 +46,6 @@ const Theme = React.createClass({
     }
 });
 
-module.exports = GitBook.connect(Theme, ({page, summary, sidebar, readme}) => {
-    return { page, summary, sidebar, readme };
+module.exports = GitBook.connect(Theme, ({page, summary, sidebar, readme, history}) => {
+    return { page, summary, sidebar, readme, history };
 });