[Vuejs]-Nuxt Loader – Throttle for Custom Loader

This is how I use a custom loading component using Vuetify overlay component with a throttle:

<template>
  <v-overlay :value="loading">
    <v-progress-circular
      indeterminate
      size="64"
    />
  </v-overlay>
</template>

<script>
export default {
  data: () => ({
    loading: false
  }),
  methods: {
    clear () {
      clearTimeout(this._throttle)
    },
    start () {
      this.clear()
      this._throttle = setTimeout(() => {
        this.loading = true
      }, 200)
    },
    finish () {
      this.clear()
      this.loading = false
    }
  }
}
</script>

This is inspired by the Nuxt default loading component.

You could add a setTimeout within your start() method in your custom loader component ~/components/common/loading.vue.

methods: {
   start() {      
     setTimeout(() => {
        this.loading = true;
     }, 2000);           
   },
   finish() { ... }
}