feat: built-in content loading

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>

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>

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"

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>

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>

yarn.lock

@@ -9045,6 +9045,12 @@ [email protected]:
   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"