support nav loading, fix issue #64

document/common/js/utils.js

+import Vue from 'vue'
 import cookie from 'js-cookie'
 
 export function setItem(k, v) {
@@ -32,4 +33,7 @@ export function getCurrentLang() {
 }
 
 const baseUrl = process.env.NODE_ENV === 'production' ? 'https://didi.github.io/cube-ui/example/#/' : `http://${window.location.hostname}:8081/#/`
-export { baseUrl }
+
+const eventHub = new Vue()
+
+export { baseUrl, eventHub }

document/components/home/home.vue

@@ -13,6 +13,7 @@
       </span>
     </div>
     <div class="router-view">
+      <nav-loading></nav-loading>
       <router-view></router-view>
     </div>
   </div>
@@ -20,6 +21,7 @@
 
 <script>
   import Lang from '../lang/lang.vue'
+  import NavLoading from '../nav-loading/nav-loading.vue'
   export default {
     data() {
       return {
@@ -34,7 +36,8 @@
       }
     },
     components: {
-      SiteLang: Lang
+      SiteLang: Lang,
+      NavLoading
     },
     methods: {
       toggleNav() {

document/components/nav-loading/nav-loading.vue

+<template>
+  <div class="nav-loading" :class="loadingCls"></div>
+</template>
+
+<script>
+  import { eventHub } from '../../common/js/utils'
+
+  export default {
+    data() {
+      return {
+        loading: false,
+        toEnd: false
+      }
+    },
+    computed: {
+      loadingCls() {
+        const cls = {}
+        if (this.loading) {
+          cls['nav-loading-ani'] = true
+        }
+        if (this.toEnd) {
+          cls['nav-loading-ani-end'] = true
+        }
+        return cls
+      }
+    },
+    created() {
+      let tid
+      let startTime
+      eventHub.$on('begin-loading', () => {
+        startTime = Date.now()
+        clearTimeout(tid)
+        this.loading = true
+      })
+      eventHub.$on('finish-loading', () => {
+        const time = Date.now() - startTime
+        if (time > 500) {
+          this.resetLoading()
+        } else {
+          tid = setTimeout(this.resetLoading, 500 - time)
+        }
+      })
+    },
+    methods: {
+      resetLoading() {
+        this.toEnd = true
+        setTimeout(() => {
+          this.toEnd = false
+          this.loading = false
+        }, 100)
+      }
+    }
+  }
+</script>
+
+<style lang="stylus">
+  @require "~@/common/stylus/variable.styl"
+
+  .nav-loading
+    z-index: 10
+    position: absolute
+    width: 100%
+    height: 2px
+    background: #009a61
+    transform: translateX(-100%)
+  .nav-loading-ani
+    animation: navloading 2s linear forwards
+  .nav-loading-ani-end
+    animation: navloadingend .1s linear
+  @keyframes navloading
+    0%
+      opacity: 0
+      transform: translateX(-100%)
+    20%
+      opacity: .5
+      transform: translateX(-60%)
+    50%
+      opacity: .8
+      transform: translateX(-40%)
+    80%
+      opacity: .8
+      transform: translateX(-20%)
+    100%
+      opacity: .8
+      transform: translateX(-10%)
+  @keyframes navloadingend
+    0%
+      opacity: .8
+      transform: translateX(-10%)
+    100%
+      opacity: 0
+      transform: translateX(0)
+</style>

document/router/routes.js

+import { eventHub } from '../common/js/utils'
 import menuConfig from '../common/config/menu'
 const routeMap = {}
 
 Object.keys(menuConfig).forEach((lang) => {
+  const loadingNotify = (p) => {
+    eventHub.$emit('begin-loading')
+    return p.then((r) => {
+      eventHub.$emit('finish-loading')
+      return r
+    })
+  }
   const docsChildrenRoute = []
   const docsRoute = {
     path: 'docs',
     redirect: './docs/introduction',
-    component: () => import(`../components/docs/${lang}.vue`),
+    component: () => loadingNotify(import(`../components/docs/${lang}.vue`)),
     children: docsChildrenRoute
   }
   routeMap[lang] = [docsRoute]
@@ -15,7 +23,7 @@ Object.keys(menuConfig).forEach((lang) => {
     getSubList(groups[name]).forEach((key) => {
       docsChildrenRoute.push({
         path: key,
-        component: () => import(`../components/docs/${lang}/${key}.md`)
+        component: () => loadingNotify(import(`../components/docs/${lang}/${key}.md`))
       })
     })
   })