From 216d04a57cf1b94ed8079126360d7bee5bd32d46 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Tue, 6 Nov 2018 02:46:15 +0800
Subject: [PATCH] feat: built-in content loading

---
 .../core/lib/app/components/Content.js        | 32 ----------
 .../core/lib/app/components/Content.vue       | 61 +++++++++++++++++++
 .../lib/app/components/ContentLoading.vue     | 47 ++++++++++++++
 packages/@vuepress/core/package.json          |  3 +-
 packages/docs/docs/guide/markdown-slot.md     |  4 +-
 packages/docs/docs/zh/guide/markdown-slot.md  |  4 +-
 yarn.lock                                     |  6 ++
 7 files changed, 120 insertions(+), 37 deletions(-)
 delete mode 100644 packages/@vuepress/core/lib/app/components/Content.js
 create mode 100644 packages/@vuepress/core/lib/app/components/Content.vue
 create mode 100644 packages/@vuepress/core/lib/app/components/ContentLoading.vue

diff --git a/packages/@vuepress/core/lib/app/components/Content.js b/packages/@vuepress/core/lib/app/components/Content.js
deleted file mode 100644
index 5d548daf80..0000000000
--- a/packages/@vuepress/core/lib/app/components/Content.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import Vue from 'vue'
-import components from '@internal/page-components'
-
-export default {
-  functional: true,
-
-  props: {
-    pageKey: String,
-    slot: String
-  },
-
-  render (h, { parent, props, data }) {
-    const pageKey = props.pageKey || parent.$page.key
-
-    if (components[pageKey]) {
-      // In SSR, if a component is not registered with the component option
-      // vue-server-renderer will not be able to resovle it.
-      if (!parent.$ssrContext) {
-        Vue.component(pageKey, components[pageKey])
-      }
-
-      return h(pageKey, {
-        class: [data.class, data.staticClass],
-        style: data.style,
-        props: {
-          slotKey: props.slot || 'default'
-        }
-      })
-    }
-    return h('')
-  }
-}
diff --git a/packages/@vuepress/core/lib/app/components/Content.vue b/packages/@vuepress/core/lib/app/components/Content.vue
new file mode 100644
index 0000000000..4e94ccd7e5
--- /dev/null
+++ b/packages/@vuepress/core/lib/app/components/Content.vue
@@ -0,0 +1,61 @@
+<template>
+  <component :is="layout" :slot-key="slotKey || 'default'"/>
+</template>
+
+<script>
+import Vue from 'vue'
+import components from '@internal/page-components'
+import ContentLoading from './ContentLoading'
+
+export default {
+  components: { ContentLoading },
+
+  props: {
+    pageKey: String,
+    slotKey: String
+  },
+
+  data () {
+    return {
+      layout: 'ContentLoading'
+    }
+  },
+
+  computed: {
+    $key () {
+      return this.pageKey || this.$page.key
+    }
+  },
+
+  created () {
+    this.loadContent(this.$key)
+  },
+
+  watch: {
+    $key (key) {
+      this.loadContent(key)
+    }
+  },
+
+  methods: {
+    loadContent (pageKey) {
+      if (Vue.component(pageKey)) {
+        return
+      }
+      this.layout = 'ContentLoading'
+      if (components[pageKey]) {
+        if (!this.$ssrContext) {
+          Promise.all([
+            components[pageKey](),
+            new Promise(resolve => setTimeout(resolve, 0))
+          ]).then(([comp]) => {
+            this.$vuepress.$emit('AsyncMarkdownAssetLoaded', this.pageKey)
+            Vue.component(pageKey, comp.default)
+            this.layout = pageKey
+          })
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/packages/@vuepress/core/lib/app/components/ContentLoading.vue b/packages/@vuepress/core/lib/app/components/ContentLoading.vue
new file mode 100644
index 0000000000..65344b467b
--- /dev/null
+++ b/packages/@vuepress/core/lib/app/components/ContentLoading.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="content content-loading">
+    <ContentLoader
+      :height="120"
+      :width="300"
+      :speed="0.5"
+      primaryColor="#f3f3f3"
+      secondaryColor="#ecebeb"
+    >
+      <rect x="0" y="5" rx="5" ry="5" width="117" height="10"/>
+      <rect x="0" y="25" rx="5" ry="5" width="85" height="10"/>
+      <rect x="0" y="60" rx="5" ry="5" width="250" height="10"/>
+      <rect x="0" y="80" rx="5" ry="5" width="280" height="10"/>
+      <rect x="0" y="100" rx="5" ry="5" width="201" height="10"/>
+    </ContentLoader>
+  </div>
+</template>
+
+<script>
+import { ContentLoader } from 'vue-content-loader'
+
+export default {
+  components: {
+    ContentLoader
+  },
+
+  data () {
+    return {
+      containerStyle: {}
+    }
+  }
+}
+</script>
+
+<style>
+  @media screen and (min-width: 719px) {
+    .content.content-loading > svg {
+      max-width: 400px !important;
+    }
+  }
+  @media screen and (max-width: 719px) {
+    .content.content-loading > svg {
+      max-width: 320px !important;
+    }
+  }
+
+</style>
diff --git a/packages/@vuepress/core/package.json b/packages/@vuepress/core/package.json
index 20e8dcb7ea..d0ce0567d8 100644
--- a/packages/@vuepress/core/package.json
+++ b/packages/@vuepress/core/package.json
@@ -67,7 +67,8 @@
     "webpack-chain": "^4.6.0",
     "webpack-merge": "^4.1.2",
     "webpack-serve": "^1.0.2",
-    "webpackbar": "^2.6.1"
+    "webpackbar": "^2.6.1",
+    "vue-content-loader": "^0.2.1"
   },
   "engines": {
     "node": ">=8"
diff --git a/packages/docs/docs/guide/markdown-slot.md b/packages/docs/docs/guide/markdown-slot.md
index 7fad111e33..56b3903544 100644
--- a/packages/docs/docs/guide/markdown-slot.md
+++ b/packages/docs/docs/guide/markdown-slot.md
@@ -44,13 +44,13 @@ Suppose your layout component is as follows:
 <template>
   <div class="container">
     <header>
-      <Content slot="header"/>
+      <Content slot-key="header"/>
     </header>
     <main>
       <Content/>
     </main>
     <footer>
-      <Content slot="footer"/>
+      <Content slot-key="footer"/>
     </footer>
   </div>
 </template>
diff --git a/packages/docs/docs/zh/guide/markdown-slot.md b/packages/docs/docs/zh/guide/markdown-slot.md
index 95f6c3509e..65034de03f 100644
--- a/packages/docs/docs/zh/guide/markdown-slot.md
+++ b/packages/docs/docs/zh/guide/markdown-slot.md
@@ -44,13 +44,13 @@ Markdown 插槽便是为了解决这一类问题。
 <template>
   <div class="container">
     <header>
-      <Content slot="header"/>
+      <Content slot-key="header"/>
     </header>
     <main>
       <Content/>
     </main>
     <footer>
-      <Content slot="footer"/>
+      <Content slot-key="footer"/>
     </footer>
   </div>
 </template>
diff --git a/yarn.lock b/yarn.lock
index f472b06fd3..b7c9a19e8e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9045,6 +9045,12 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-content-loader@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/vue-content-loader/-/vue-content-loader-0.2.1.tgz#0eb332e2a72643d57fb209d72d6526573b191f5a"
+  dependencies:
+    babel-helper-vue-jsx-merge-props "^2.0.3"
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"