Nuxt.js のカスタムローディングコンポーネントで throttle を再現する

備忘録。

Nuxt.js のローディングにカスタムコンポーネントを使っている際に、描画を遅延させる方法について。

Nuxt.js はローディング画面でデフォルトでプログレスバーを用意してくれている。

このプログレスバーの挙動は nuxt.config.js の loading で設定できる。特にページ遷移時にプログレスバーがちらつくのを防止するために、throttle フィールドでプログレスバーの表示をディレイさせることができる。

  loading: {
    throttle: 300 // ディレイ時間をデフォルトの200ミリ秒から300ミリ秒に変える
  }

さて、ローディングの表現にはデフォルトのプログレスバーではなく独自のコンポーネントを使うこともできる。

  loading: '~/components/LoadingAnimation'

この場合、throttle のような設定フィールドは使えないので、ディレイは自分で実装する必要がある。といっても難しいことはなく、Nuxt.js のデフォルトのプログレスバーの実装を参考にすればいい。

const throttle = 200

export default {
  data(): {
    return { visible: false }
  }
  methods: {
    start(): {
      this.clear()
      this._throttle = setTimeout(() => show(), throttle)
    },
    finish() {
      this.clear()
    },
    show() {
      this.visible = true
    },
    clear() {
      this.visible = false
      clearTimeout(this._throttle)
    }
  },
  beforeDestroy () {
    this.clear()
  }
}