refactor: Package LoadingPage component

components/Common.vue

@@ -5,7 +5,7 @@
     @touchstart="onTouchStart"
     @touchend="onTouchEnd">
     <transition name="fade">
-      <Loading v-if="firstLoad"></Loading>
+      <LoadingPage v-if="firstLoad"></LoadingPage>
       <Password v-else-if="!isHasKey"></Password>
       <div v-else>
         <Navbar
@@ -42,12 +42,11 @@ import Navbar from '@theme/components/Navbar.vue'
 import Sidebar from '@theme/components/Sidebar.vue'
 import { resolveSidebarItems } from '../util'
 import Password from '@theme/components/Password'
-import Loading from '@theme/components/Loading'
 import Valine from '@theme/components/Valine/'
 import { setTimeout } from 'timers'
 
 export default {
-  components: { Sidebar, Navbar, Password, Valine, Loading },
+  components: { Sidebar, Navbar, Password, Valine },
 
   props: ['sidebar', 'isComment'],
 

components/Loading.vue

@@ -1,108 +0,0 @@
-<template>
-  <div id="loader-wrapper">
-    <div class="loader-main">
-      <div v-for="item in 4" :key="`out${item}`">
-      </div>
-    </div>
-    <h3 class="title" v-if="$frontmatter.home">Welcome {{$site.title}}</h3>
-    <p class="description">Just wait a minute!</p>
-  </div>
-</template>
-
-<style lang="stylus" scoped>
-#loader-wrapper{
-  height:100vh;
-  width:100vw;
-  .loader-main{
-    position:fixed;
-    width:120px;
-    height:50px;
-    top:45%;
-    left:50%;
-    z-index:555;
-    transform:translate(-50%,0);
-    div {
-      &:nth-child(2){ animation:pacman-balls 1s 0s infinite linear; }
-      &:nth-child(3){ animation:pacman-balls 1s 0.33s infinite linear; }
-      &:nth-child(4){ animation:pacman-balls 1s 0.66s infinite linear; }
-      &:nth-child(5){ animation:pacman-balls 1s 0.99s infinite linear; }
-      &:first-of-type{
-        width:0px;
-        height:0px;
-        border-right:25px solid transparent;
-        border-top:25px solid $accentColor;
-        border-left:25px solid $accentColor;
-        border-bottom:25px solid $accentColor;
-        border-radius:25px;
-        animation:rotate_pacman_half_up 0.5s 0s infinite;
-      }
-      &:nth-child(2){
-        width:0px;
-        height:0px;
-        border-right:25px solid transparent;
-        border-top:25px solid $accentColor;
-        border-left:25px solid $accentColor;
-        border-bottom:25px solid $accentColor;
-        border-radius:25px;
-        animation:rotate_pacman_half_down 0.5s 0s infinite;
-        margin-top:-50px;}
-      &:nth-child(3),&:nth-child(4),&:nth-child(5),&:nth-child(6){
-        background-color:$accentColor;
-        width:15px;
-        height:15px;
-        border-radius:100%;
-        margin:2px;
-        width:10px;
-        height:10px;
-        position:absolute;
-        transform:translate(0,-6.25px);
-        top:25px;
-        left:100px;
-      }
-    }
-  }
-
-  .title {
-    position: absolute;
-    left 0
-    right 0
-    top 12%
-    margin auto
-    text-align center
-    color $textColor
-    font-size 30px
-    box-sizing: border-box;
-    padding: 0 10px;
-    text-shadow 0 2px 10px rgba(0,0,0,0.2);
-  }
-  .description {
-    position: absolute;
-    left 0
-    right 0
-    top 20%
-    margin auto
-    text-align center
-    color $textColor
-    font-size 22px
-    box-sizing: border-box;
-    padding: 0 10px;
-    text-shadow 0 2px 10px rgba(0,0,0,0.2);
-  }
-
-  @keyframes pacman-balls{
-    75%{opacity:0.7;}
-    100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px);}
-  }
-  @keyframes rotate_pacman_half_up{
-    0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
-    50%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
-    100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
-  }
-  @keyframes rotate_pacman_half_down{
-    0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
-    50%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
-    100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
-  }
-}
-
-</style>

index.js

@@ -18,9 +18,10 @@ module.exports = (options, ctx) => ({
   },
 
   plugins: [
-    '@vuepress-reco/vuepress-plugin-back-to-top',
-    '@vuepress-reco/vuepress-plugin-pagation',
-    '@vuepress-reco/vuepress-plugin-screenfull',
+    '@vuepress-reco/back-to-top',
+    '@vuepress-reco/loading-page',
+    '@vuepress-reco/pagation',
+    '@vuepress-reco/screenfull',
     '@vuepress/active-header-links',
     ['@vuepress/plugin-blog', {
       permalink: '/:regular',