Vueのタグが見えないようにローディング画面を付ける

Vueの規模が大きくなってくると、Vueのロードが完了するまでの間、{{ xxxx }}のようなタグが目立ってくるようになります。
Vueのコンポーネントを使えばうまく回避できるのかもしれませんが、Vueインスタンスと双方向データバインディングだけで満足している私にとっては、少々悩ましいです。
そこで、VueやJavascriptに頼らず、CSSだけでVueのロード前の画面をかぶせるローディング中画面を作ろうかなあと思います。

実際のローディング画面を見たい場合は、以下のWebページを開くと、一瞬だけローディング画面が見れます。

Webページ
　https://poruruba.github.io/utilities/

（参考）GitHub
　https://github.com/poruruba/utilities

#やってること

Flexパネルを画面全体で覆って、CSSアニメーションを表示させ、Vueのロードが完了したら、Flexパネルをフェードアウトさせる、です。

* 画面全体を覆うFlexパネルの定義
* ロード完了したらフェードアウトさせる処理
* フェードアウトを開始する処理
* ロード中のアニメーションのひな型を選ぶ
* HTMLにロード中アニメーションのエレメントを挿入する
* Javascriptにフェードアウト開始の呼び出しを追加する

##画面全体を覆うFlexパネルの定義

CSSで以下のように表現します。

```css:public/css/start.css
#loader-background {
  background: #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  display: flex;
  top: 0px;
  left: 0px;
  z-index: 9999;
  --sk-color: #00ced1;
}
```

heightとwidthを100%にしてます。
※--sk-colorは後で説明します。


##ロード完了したらフェードアウトさせる処理

CSSで以下のように表現します。

``` css:public/css/start.css
.loader-loaded {
  animation: fadeout-anim 1s linear forwards;
}

@keyframes fadeout-anim {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
```

上記にて、CSSアニメーションを使って1秒かけて透明およびhiddenにしてます。

##フェードアウトを開始する処理

前のCSSで、loader-loadedのクラスがついていれば、フェードアウトのアニメーションが開始されるようにしました。
なので、Vueのロードが完了したタイミングで、Javascriptから以下を呼び出せばよいです。

```js:public/js/vue_utils.js
function loader_loaded(){
  const element = document.getElementById("loader-background");
  if( element )
    element.classList.add('loader-loaded');
}
```

##ロード中のアニメーションのひな型を選ぶ

こちらのCSSが単純そうだったので採用しました。

tobiasahlin/SpinKit

https://github.com/tobiasahlin/SpinKit

デモページもありますので、どんなアニメーションか確認できます。

https://tobiasahlin.com/spinkit/

CDNにも登録されているのですぐに使えます。

```html:public/index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spinkit/2.0.1/spinkit.min.css" />
```

例えば、以下のようなHTMLを追加すればよいようです。

```html
<div class="sk-chase">
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
</div>
```

#HTMLにロード中アニメーションのエレメントを挿入する

```<html>``` の ```<body>``` の先頭あたりに以下を追加します。
上記のアニメーションを使う場合

``` html:public/index.html
<div id="loader-background">
  <div class="sk-chase sk-center">
    <div class="sk-chase-dot"></div>
    <div class="sk-chase-dot"></div>
    <div class="sk-chase-dot"></div>
    <div class="sk-chase-dot"></div>
    <div class="sk-chase-dot"></div>
    <div class="sk-chase-dot"></div>
  </div>
</div>
```

要するに、idが「loader-background」をもったdivエレメントの中にさきほどのアニメーションの定義を記載するということです。
そのとき、classに「sk-center」を付けてあげます。そうすると、アニメーションが画面中央で動いてくれるようになります。
また、FlexパネルのCSS指定のところで「--sk-color: #00ced1;」というCSS変数を追加していました。これは、SpinKitのアニメーションの色の指定です。お好みで色を変えてください。

#Javascriptにフェードアウト開始の呼び出しを追加する

Vueでのロード完了として、mountedに以下を追加しましょう。

```js:public/js/start.js
    mounted: function(){
      // ・・・
      loader_loaded(); // ★これ
    }
```

#単純にローディング中に画面全体を非表示にするだけれあれば

Vueでv-cloakという機能があります。ローディング中はこの値が有効ですが、ローディングが完了すると無効となります。
そこで、以下をCSSで指定します。

```css:public/css/start.css
[v-cloak] {
  display: none;
}
```

そして、ローディング中は非表示にしたい部分に以下のようにv-cloakを付けます。

```html
    <div id="top" class="container" v-cloak>
```


#おわり

私は、上記をすでに埋め込み済みの以下のテンプレートをいつも使ってます。

poruruba/express_template

https://github.com/poruruba/express_template


以上