From 55f255da49c9f28e257acfac437eadc59267a152 Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Sun, 19 Feb 2017 08:39:05 +0800
Subject: [PATCH] feat(themes): add loading info

---
 docs/plugins.md              |  2 +-
 docs/quickstart.md           | 22 ++++++++++++++++++++++
 docs/zh-cn/plugins.md        |  2 +-
 docs/zh-cn/quickstart.md     | 23 +++++++++++++++++++++++
 src/themes/basic/_layout.css | 17 +++++++++++++++++
 5 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/docs/plugins.md b/docs/plugins.md
index 2dd75e905..a4a188f15 100644
--- a/docs/plugins.md
+++ b/docs/plugins.md
@@ -65,7 +65,7 @@ The hook supports handling asynchronous tasks.
 ```js
 window.$docsify = {
  plugins: [
-  function (hook) {
+  function (hook, vm) {
     hook.init(function() {
       // Called when the script starts running, only trigger once, no arguments,
     })
diff --git a/docs/quickstart.md b/docs/quickstart.md
index 0628e70a5..036d081e4 100644
--- a/docs/quickstart.md
+++ b/docs/quickstart.md
@@ -61,3 +61,25 @@ If your system has Python, you can easily to run a static server to preview your
 ```bash
 cd docs && python -m SimpleHTTPServer 3000
 ```
+
+## Loading tip
+
+Show `Loading...` Before starting rendering. You can customize the content.
+
+*index.html*
+```html
+  <div id="app">Please wait...</div>
+```
+
+You should set the `data-app` attribute if you changed `el`.
+
+*index.html*
+```html
+  <div data-app id="main">Please wait...</div>
+
+  <script>
+    window.$docsify = {
+      el: '#main'
+    }
+  </script>
+```
diff --git a/docs/zh-cn/plugins.md b/docs/zh-cn/plugins.md
index 8145f016e..aeabf8d80 100644
--- a/docs/zh-cn/plugins.md
+++ b/docs/zh-cn/plugins.md
@@ -61,7 +61,7 @@ docsify 提供了一套插件机制，其中提供的钩子（hook）支持处
 ```js
 window.$docsify = {
  plugins: [
-  function (hook) {
+  function (hook, vm) {
     hook.init(function() {
       // 初始化时调用，只调用一次，没有参数。
     })
diff --git a/docs/zh-cn/quickstart.md b/docs/zh-cn/quickstart.md
index c4ebc2821..5bdaf2da8 100644
--- a/docs/zh-cn/quickstart.md
+++ b/docs/zh-cn/quickstart.md
@@ -59,3 +59,26 @@ docsify serve docs
 ```bash
 cd docs && python -m SimpleHTTPServer 3000
 ```
+
+## Loading 提示
+
+初始化时会显示 `Loading...` 内容，你可以自定义提示信息。
+
+*index.html*
+```html
+  <div id="app">加载中</div>
+```
+
+如果更改了 `el` 的配置，需要将该元素加上 `data-app` 属性。
+
+*index.html*
+```html
+  <div data-app id="main">加载中</div>
+
+  <script>
+    window.$docsify = {
+      el: '#main'
+    }
+  </script>
+```
+
diff --git a/src/themes/basic/_layout.css b/src/themes/basic/_layout.css
index d413c10ac..6241ffdb8 100644
--- a/src/themes/basic/_layout.css
+++ b/src/themes/basic/_layout.css
@@ -7,6 +7,23 @@
   -webkit-font-smoothing: antialiased;
 }
 
+body:not(.ready) {
+  [data-cloak] {
+    display: none;
+  }
+}
+
+div#app {
+  text-align: center;
+  font-size: 30px;
+  font-weight: lighter;
+  margin: 40vw auto;
+
+  &:empty::before {
+    content: "Loading...";
+  }
+}
+
 .emoji {
   height: 1.2em;
   vertical-align: middle;