ローディング表示モジュールの調査
vue.jsでローディング表示を行う場合、ローディング表示に関係するモジュールについて調査する。
出来れば、
- 実装が簡単
- よく見かけるような見た目(独自性がない)
- メンテされている
という条件にあてはまるものを採用したい。
調べた結果を以下の表にまとめた。
| 名前 | 種類 | GitHub Star | 最終更新(2020/05/06時点) | 備考 |
|---|---|---|---|---|
| vue-loading | Vueコンポーネント | 2018/12/22 | 紹介している記事が多い | |
| vue-spinner | Vueコンポーネント | 2017/10/07 | Vue2.0をサポートしていない | |
| Single Element CSS Spinners | css | 2019/12/09 | よく見かける見た目 | |
| vue-loading-overlay | Vueコンポーネント | 2020/04/18 | 全画面に表示するらしい | |
| vue-wait | Vueコンポーネント | 2019/10/08 | だいぶ機能がリッチそう | |
| ajaxload.info | gif | - | - | よく見かける見た目 |
調べて出てきた候補は以上。
今回は見た目が個人的に好み+cssなので、レスポンシブに対応しやすそうという理由でSingle Element CSS Spinnersを使うことにする。
実装
cssの読み込みについて今回はBladeテンプレートファイルで行う。
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
あとは単一ファイルコンポーネントの方で、ロード表示を行いたところに以下のように処理を追加する。
<template>
...
<div class="loader" v-if="!posts.length">Loading...</div>
...
</template>
なお、上の例ではdataプロパティにpostsというオブジェクトを持っており、ロード前は空配列になっている。
そのため、postsが空配列の場合は、ローディング表示を行うような処理になっている。
空配列の判定は以下の記事を参考にさせたいただいた。
また、ロード前が空配列ではなく、nullになっている場合は、以下のように実装した。
<div class="loader" v-if="!post">Loading...</div>
nullの判定は以下の記事を参考にさせていただいた。
また、今回実際に実装したサイトは以下のサイトになる。
ローディングが必要な箇所に簡易的なローディング表示を行っている。
