簡単にLoadingを実装する。

vue.jsコンポーネントとして提供しているepic-spinnerを使用すると、簡単にかっこいいLoadingを実装できます。

epic-spinnerをインストール

npm installするだけです。

npm install --save epic-spinners

利用する。

ag-gridの列幅をgrid幅に合わせて表示する。のコードにepic-spinnerを使用して、見ましょう。
動作を確認するためにあえて時間がかかるようにしています。
デモサイトを見て、使用したいコンポーネントを決めてください。
今回は、FingerprintSpinnerを使用します。

importしてcomponentsに登録しテンプレートに記述するだけで終わりです。
今回は動作確認のために、setTimeoutを使用してあえて表示するようにしています。

<template>
  <div>
    <div
      v-if="loading"
    >
      <fingerprint-spinner
        :animation-duration="2000"
        :size="250"
        color="#26A69A"
        class="loading"
      />
    </div>
    <div
      v-show="!loading"
    >
      <ag-grid-vue
          class="ag-theme-material"
          style="height: 500px"
          :gridOptions="gridOptions"
          :rowDataChanged="onRowDataChanged"
          />
    </div>
  </div>
</template>
<script>
import { FingerprintSpinner } from 'epic-spinners';
import { AgGridVue } from "ag-grid-vue";
import { LAST_NAMES, FIRST_NAMES, PREFECTURES } from "../datas";

export default {
  name: "AgGridSample",
  components: {
    FingerprintSpinner ,
    AgGridVue
  },
  data() {
    return {
      loading: true,
      gridOptions: null
    };
  },
  created() {
    this.gridOptions = {
      columnDefs: this.createColumnDef(),
      rowData: this.createRowData(),
      enableSorting: true,
      enableFilter: true,
      suppressDragLeaveHidesColumns: true
    }
  },
  async mounted() {
    await this.timeout(10000);
    this.loading = false;
  },
  methods: {
    createColumnDef() {
      return [
        {
          headerName: "苗字",
          field: "lastName"
        },
        {
          headerName: "名",
          field: "firstName"
        },
        {
          headerName: "性別",
          field: "sex"
        },
        {
          headerName: "年齢",
          field: "age"
        },
        {
          headerName: "都道府県",
          field: "prefecture"
        }
      ];
    },
    /**
     * 行データ変更時の処理。
     */
    onRowDataChanged() {
      this.$nextTick(() =>{
        // 列幅をgridに合わせる。
        this.gridOptions.api.sizeColumnsToFit();
      });
    },
    /**
     * ag-gridで表示するデータを作成。
     *
     */
    createRowData() {
      return [...Array(1000)].map(() => {
        const sex = ["MALE", "FEMALE"][Math.floor(Math.random() * 2)];
        return {
          sex,
          lastName: LAST_NAMES[Math.floor(Math.random() * LAST_NAMES.length)],
          firstName:
            FIRST_NAMES[sex][
              Math.floor(Math.random() * FIRST_NAMES[sex].length)
            ],
          age: Math.floor(Math.random() * 30),
          prefecture:
            PREFECTURES[Math.floor(Math.random() * PREFECTURES.length)]
        };
      });
    },
    /**
     * setTimeoutのPromise化
     */
    timeout(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }
  }
};
</script>
<style scoped>
  .loading {
    margin: 0 auto;
  }
</style>