refactor: distinguish between first screen loading and route switching

Author: ulivz

packages/@vuepress/core/lib/app/components/Content.vue

@@ -1,5 +1,12 @@
 <template>
-  <component :is="layout" :slot-key="slotKey || 'default'"/>
+  <transition :name="layout === 'ContentLoading' || !layout ? null : 'fade'">
+    <component
+      v-if="layout"
+      :is="layout"
+      :slot-key="slotKey || 'default'"
+    />
+    <div v-else class="conent"></div>
+  </transition>
 </template>
 
 <script>
@@ -33,12 +40,22 @@ export default {
 
   watch: {
     $key (key) {
-      this.loadContent(key)
+      this.reloadContent(key)
     }
   },
 
   methods: {
     loadContent (pageKey) {
+      this.layout = null
+      if (components[pageKey]) {
+        if (!this.$ssrContext) {
+          Vue.component(pageKey, components[pageKey])
+          this.layout = pageKey
+        }
+      }
+    },
+
+    reloadContent (pageKey) {
       if (Vue.component(pageKey)) {
         return
       }
@@ -47,15 +64,27 @@ export default {
         if (!this.$ssrContext) {
           Promise.all([
             components[pageKey](),
-            new Promise(resolve => setTimeout(resolve, 0))
+            new Promise(resolve => setTimeout(resolve, 300))
           ]).then(([comp]) => {
             this.$vuepress.$emit('AsyncMarkdownAssetLoaded', this.pageKey)
             Vue.component(pageKey, comp.default)
-            this.layout = pageKey
+            this.layout = null
+            setTimeout(() => {
+              this.layout = pageKey
+            })
           })
         }
       }
     }
   }
 }
 </script>
+
+<style>
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .3s;
+  }
+  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+    opacity: 0;
+  }
+</style>